Gutenberg Block Editor Toolkit – EditorsKit

EditorsKit provides set of page building block options and toolkit for the new WordPress Gutenberg editor.

Vous pouvez désormais mieux contrôler les formats de texte, le stylage et les processus de travail en utilisant tout simplement les outils fournis par l’extension EditorsKit.

See for yourself

New: Block Styles Manager

You can now easily create and manage all of your block styles with the new styles manager.

Rich Text Formats

EditorsKit also adds the missing text formats for better content creation. The following rich text format are available upon plugin activation:

• Option d’attributs de liens « rel » nofollow et sponsored
• Texte surligné ou couleurs de titres
• Couleur de fond du texte sélectionné
• Options d’effacement de formatage
• Justification du paragraphe
• Underline Text Format
• Exposant
• Indice
• Ajouter un retrait aux blocs Paragraphe, Titre ou Liste
• Transformation du texte en majuscule
• Alignement des légendes d’images et du contenu embarqué
• Espace insécable
• Abréviations pour les acronymes
• Insérer des caractères spéciaux

Glyphes et caractères spéciaux

Insérez aisément des caractères spéciaux et symboles dans l’éditeur de blocs Gutenberg. Les caractères spéciaux sont catégorisés et vous pouvez utiliser le champ de recherche pour trouver un symbole spécifique.

Prise en charge du markdown

A partir de EditorsKit 1.6 , vous pouvez utilisez du markdown dans l’éditeur de blocs Gutenberg pendant la frappe. Le markdown pour *gras*, _italique_ et ~rayé~ sont disponibles dès l’activation de l’extension. La liste des markdowns disponibles est aussi accessible depuis le menu de réglages.

Watch it in action

Visibilité du bloc

En utilisant EditorsKit, vous aurez les contrôles de visibilité suivants afin de mieux gérer et afficher votre contenu.

• Show or hide Gutenberg blocks on desktop, tablet and mobile devices
• User logged-in or logged-out state block visibility
• Custom PHP conditional display logic
• Show or hide Gutenberg blocks based on Advanced Custom Fields Plugin(ACF) Value

Estimation du temps de lecture

Le compteur de mots est déjà disponible avec l’éditeur de blocs Gutenberg. EditorsKit étend ce comptage de mots et affiche également un temps de lecture estimé. Sur la base d’environ 275 mots par minute, plus des calculs supplémentaires pour les blocs Image, vous pouvez afficher une estimation plus précise du temps de lecture sur vos articles et pages.

Grâce aux shortcodes, vous pouvez afficher le temps de lecture estimé sur votre contenu en utilisant le code ci-dessous.

• before : texte ou élément que vous souhaitez afficher avant le temps de lecture.
• after : texte ou élément que vous souhaitez afficher après le temps de lecture.
• tag : default div : Html tag container
• fallback : définissez la valeur sur ‘true’ pour afficher le compteur de mots basé sur PHP sur les anciens articles qui ne sont pas édités ou créés par l’éditeur de blocs Gutenberg

Block Guide Lines

EditorsKit features other tool aside from visibility management. With the new Block Guide Lines, you can easily toggle visible guide lines on title and each editor blocks in order to check the element boundaries. This feature will also help your workflow on handling nested blocks.

Copier-coller les blocs sélectionnés

Note: This feature is no longer available in the latest versions of EditorsKit because this has been added to Gutenberg.

Editorskit Typography

Note: This feature is deprecated and no longer available in the latest version. If you want to continue using Editorskit typography, You can download and install the editorskit deprecated typography addon manually from github.

Styles de blocs Image et Bannière

Vient avec une sélection de styles de blocs Bannière et Image pour des formes personnalisées et des mises en page diagonales, circulaires et des coins arrondis ; ajoutez même des ombres portées.

Styles additionnels pour le bloc Liste

Fournit les styles additionnels suivants pour le bloc Liste :

• Coches
• Flèches
• Croix
• Connecté
• Etoiles
• Tiret
• Aucun

Alignement responsive du texte

Modifiez facilement l’alignement du texte par appareil. Cela vous aidera à fournir un alignement différent sur les appareils mobiles et les tablettes, en plus de l’option existante pour les ordinateurs.

Option de pleine hauteur d’écran

Affichez simplement les blocs sélectionnés en plein écran en basculant l’option « Pleine hauteur » dans le panneau avancé. Vous obtiendrez instantanément de belles sections héros en utilisant uniquement des blocs du cœur WordPress.

Permuter la visibilité du titre

Cachez facilement des articles, pages ou titres de types d’articles sur votre site en un seul clic. Cela vous permet de créer des articles et pages entièrement avec l’éditeur de blocs Gutenberg sans voir « (sans titre) » dans l’interface administrateur.

Import et export de blocs

Exportez chaque bloc ou bloc sélectionné et blocs réutilisables directement dans l’éditeur, sans avoir à naviguer dans un tableau de bord séparé. Cliquez et glissez les fichiers JSON exportés dans l’éditeur et ils seront automatiquement transformés en blocs Gutenberg ; même chose pour les blocs réutilisables.

Meilleures classes CSS personnalisées

Grande amélioration de l’option Classe(s) CSS additionnelle(s) ! EditorsKit offre une meilleure interface utilisateur avec proposition de classes pendant la frappe. Fonctionne avec un filtre personnalisé PHP, les développeurs de thèmes peuvent inclure des classes utilitaires personnalisées pour plus d’options de personnalisation.

Définir le bloc Image comme image mise en avant

Permettre au bloc Image sélectionné d’être facilement défini comme image mise en avant via la liste déroulante des paramètres du bloc.

Téléversement des images mises en avant par glisser-déposer

Téléversez ou modifiez facilement l’image mise en avant dans l’éditeur de blocs Gutenberg en faisant glisser l’image sur le panneau latéral intitulé Image mise en avant.

Coloration syntaxique en mode éditeur de code

Améliorer l’affichage en mode « Éditeur de code ». Alimenté par la bibliothèque CodeMirror utilisée par défaut par WordPress, l’éditeur de code s’affichera avec une coloration syntaxique du code qui permet de vérifier facilement chaque élément et s’il y a des erreurs dans vos codes HTML.

Option de mise en page lien et carte du bloc Média et Texte

Attribuer un lien personnalisé au bloc Média et Texte. Ajoutez facilement un lien personnalisé, un média ou une pièce jointe. Vous pouvez également définir l’ouverture dans un nouvel onglet, ajouter un lien non-suivi et/ou définir un lien pour l’ensemble du bloc. De plus, vous pouvez définir l’affichage du bloc Média et texte sous forme de carte avec l’option de placer l’image au-dessus ou en-dessous. Cette fonction s’intègre parfaitement à la barre d’outils de sélection de la mise en page.

Affecter un lien aux blocs Bannière, Groupe et Colonne

Affecter un lien aux blocs Bannière, Groupe et Colonnes en toute simplicité, avec la possibilité d’activer des attributs de lien « rel » tels que « ouvrir dans un nouvel onglet », « nofollow » et/ou « sponsorisé ». Vous pouvez également activer l’option supplémentaire permettant d’appliquer une animation de survol.

Raccourcis clavier

EditorsKit ajoute des raccourcis clavier qui manquent à l’éditeur Classique. Lorsqu’il est activé, vous pouvez utiliser les raccourcis suivants pour gagner facilement du temps et améliorer votre processus d’écriture.

• CTRL + ALT + 1 : Titre de niveau 1
• CTRL + ALT + 2 : Titre de niveau 2
• CTRL + ALT + 3 : Titre de niveau 3
• CTRL + ALT + 4 : Titre de niveau 4
• CTRL + ALT + 5 : Titre de niveau 5
• CTRL + ALT + 6 : Titre de niveau 6
• CTRL + ALT + c : Centrer
• CTRL + ALT + r : Aligner à droite
• CTRL + ALT + l : Aligner à gauche
• CTRL + ALT + j : Justifier
• CMD + SHIFT + . : Sélectionne le bloc Parent

Navigateur de blocs

Afficher le « navigateur de blocs » sur un bloc-parent d’autres blocs. Disponible pour les blocs Colonne et Groupe.

Amélioration de l’expérience utilisateur et UI

Améliore l’interface et offre une meilleure expérience d’écriture.

Copiez et collez des dégradés personnalisés

Copiez facilement les couleurs de dégradés personnalisés dans votre presse-papier et collez-les où vous voulez. Vous pouvez aussi sélectionner les combinaisons disponibles de CopyGradients et coller facilement les couleurs dans les blocs Bannière et Bouton.

Réglages de fonctionnalités

Activez ou désactivez des fonctionnalités d’EditorsKit via le menu « Réglages d’EditorsKit ». Vous avez les pleins contrôles sur les fonctionnalités de l’extension et pouvez désactiver les fonctionnalités dont vous n’avez pas besoin sur votre site.

Theme Supports for Developers

EditorsKit devient aussi de plus en plus developer-friendly. A partir de la version 1.5, des theme_supports personnalisés ont été ajoutés pour offrir aux développeurs de thèmes des options pour que l’expérience d’édition dans l’éditeur de blocs Gutenberg pour les utilisateurs reflète l’affichage frontend. En apprendre plus ici.

Aide, trucs et astuces accessibles

Ajoutez le bouton Aide, trucs et astuces en bas à droite de l’éditeur pour aider les utilisateurs à découvrir plusieurs conseils et raccourcis utiles. Ces conseils amélioreront certainement votre processus de travail et vous permettront de gagner du temps en parcourant le nouvel éditeur de blocs.

Bloc ShareABlock

Insérez vos téléchargements depuis shareablock.com facilement en utilisant ce bloc. Parcourez vos modèles de blocs et vos gabarits, puis ajoutez-les à votre contenu en un seul clic.

Helping you with the new Gutenberg Editor

EditorsKit is created to help you navigate through the new editor. Each new features will make your page building more convenient and easier. You can help achieving this goal through the community:

• Join Facebook Community
• Follow Us on Twitter
• Contribute on Github

Contact and Credits

EditorsKit is maintained and developed by Munir Kamal.