web-dev-qa-db-fra.com

Ajout de boutons de formatage aux contrôles de blocs/paragraphes Gutenberg de base/paragraphe

Lorsque vous insérez un bloc de base/paragraphe dans le contenu, vous pouvez choisir par exemple "bold", "add link" des contrôles au-dessus du contenu:

 enter image description here 

Pour mon client, j'aimerais ajouter des boutons de formatage pour <sup></sup> et <sub></sub>, afin de permettre l'écriture de formules chimiques ou mathématiques simples, par exemple. CO2 ou m2.

J'ai essayé quelque chose comme ça, avec un filtre (pris de ici ):

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls, BlockControls } = wp.editor;
const { PanelBody, Toolbar } = wp.components;

const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        return (
            <Fragment>
                <BlockControls>
                    // what should I enter here?
                </BlockControls>
                <BlockEdit { ...props } />
            </Fragment>
        );
    };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );

a) comment puis-je ajouter les boutons requis dans le <BlockControls> filtré?

b) est-ce la bonne approche?

Mise à jour 2019-01-24

Un tutoriel officiel est maintenant disponible ici . Je ne l'ai pas encore essayé, mais cela semble être exactement ce que je cherchais.

block-editor
2
uruk

Si je comprends bien vos besoins, et en supposant que vous ne l'ayez pas encore découvert, ce plugin pourrait être utile/vous fournir ce dont vous avez besoin:

https://wordpress.org/plugins/advanced-rich-text-tools/

Si vous voulez le construire vous-même, le code source de ce plugin peut également être instructif https://github.com/iseulde/advanced-rich-text-tools/blob/master/sub-sup.js et vous demandera d’utiliser la nouvelle API de format (Gutenberg).

1
Fergus Bisset

Un tutoriel officiel pour ajouter des boutons personnalisés est maintenant disponible ici .

0
uruk