web-dev-qa-db-fra.com

Afficher uniquement la barre d'outils ciblée pour le bloc Gutenberg avec plusieurs champs de texte

J'essaie de créer un bloc avec plusieurs champs de texte. C'est assez facile, mais lorsque je sélectionne le bloc pour l'éditer, les deux barres d'outils s'affichent. J'ai recherché la documentation et ne trouve rien.

Voici le code JSX qui fonctionne le plus souvent. Il ajoute un en-tête, un paragraphe et une image au bloc. Mais lorsqu'un élément RichText est actif, les deux barres d'outils s'affichent, ce qui est gênant.

const { registerBlockType, RichText, AlignmentToolbar, BlockControls, InspectorControls, MediaUpload } = wp.blocks;
const { Button, TextControl } = wp.components;

registerBlockType( 'skulogic/header', {
    title: 'SKULogic Header',
    icon: 'universal-access-alt',
    category: 'layout',

    attributes: {
        title: {
            type: 'array',
            source: 'children',
            selector: 'h2',
        },
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        mediaID: {
            type: 'number',
        },
        mediaURL: {
            type: 'string',
            source: 'attribute',
            selector: 'div',
            attribute: 'data-src',
        },
    },

    edit( { attributes, className, setAttributes } ) {
        const { mediaID, mediaURL, title, content } = attributes;

        const onChangeTitle = value => {
            setAttributes( { title: value } );
        };

        const onSelectImage = media => {
            setAttributes( {
                mediaURL: media.url,
                mediaID: media.id,
            } );
        };

        const onChangeContent = newContent => {
            setAttributes( { content: newContent } );
        };

        return (
            <div className={ className }>
                <RichText
                    tagName="h2"
                    placeholder={ 'Page Header' }
                    value={ title }
                    onChange={ onChangeTitle }
                />
                <RichText
                    tagName="p"
                    placeholder={ 'Page Content' }
                    value={ content }
                    onChange={ onChangeContent }
                />
                <MediaUpload
                    onSelect={ onSelectImage }
                    type="image"
                    value={ mediaID }
                    render={ ( { open } ) => (
                        <Button className={ mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
                            { ! mediaID ? 'Upload Image' : <img src={ mediaURL } /> }
                        </Button>
                    )}
                />
            </div>
        );
    },
    save( { attributes, className } ) {
        const { mediaID, mediaURL, title, content } = attributes;

        const divStyle = {};
        if( mediaURL ) {
            divStyle.backgroundImage = 'URL('+mediaURL+')';
        }

        return (
            <div className={ className } data-src={ mediaURL } style={ divStyle }>
            <h2>{ title }</h2>
            <p>{ content }</p>
            </div>
        );
    },
} );

Voir la capture d'écran ci-jointe montrant la barre d'outils pour les éléments <h2> et <p>. Je veux seulement montrer celui qui est au point.

 Two toolbars 

block-editor
3
Nathan Johnson

<RichText> a une propriété, isSelected. Lorsque isSelected est vrai, les contrôles sont affichés. Par défaut, isSelected est représentatif du bloc en cours de sélection.

de les docs

isSélectionné: Booléen

Optionnel. Indiquer si l'entrée est sélectionnée ou non afin d'afficher les contrôles de formatage. Par défaut, il rend les contrôles lorsque le bloc est sélectionné

isSelected est aussi un accessoire (je pense?) qui peut être passé à edit({ isSelected }). isSelected par défaut fonctionne en dehors du bloc en cours de sélection.

Donc, la valeur par défaut est <RichText .. isSelected={ isSelected }>.

J'avais l'habitude d'avoir une solution pour cela, à la version 2.2, lorsque focus était utilisé, mais les choses ont changé. Quoi qu'il en soit, vous pouvez probablement écraser ceci en écrivant votre propre JS pour voir si le composant <RichText> en cours est activé ou non. Et ça va changer vos barres d’outils.

METTRE À JOUR:

Depuis l'un des développeurs de Gutenberg directement:

@youknowriad

dans la version actuelle, vous pouvez utiliser state et onFocus sur RichText pour garder trace du RichText actuellement ciblé, mais dans la version suivante, cette opération doit être effectuée automatiquement.

MISE À JOUR 2:

Quelqu'un a connu votre problème exact, montre la solution fournie par code: https://github.com/WordPress/gutenberg/issues/6740#issuecomment-388829359

2
David Sword