Fügen Sie Bootstrap-Schaltflächenstile zum standardmäßigen Gutenberg-Schaltflächenblock in WordPress hinzu

Ich möchte die Standard-Schaltflächenstile aus dem Bootstrap-Framework mit dem Standard-Schaltflächenblock von Gutenberg verwenden.

Ich habe eine Lösung gefunden, um die Standardstile aus WordPress zu entfernen und einige eigene Stile hinzuzufügen. Hier ist der Link: https://www.billerickson.net/block-styles-in-gutenberg/

Ich verwende den Code von Bill Erickson, um die Standardstile zu entfernen und einen neuen hinzuzufügen. In meinem Fall die .btn-primary Stil von Bootstrap:

wp.domReady( () => {
    wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
    wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
    wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );

    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'btn',
        label: 'Default',
        isDefault: true,
    });

    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'btn-primary',
        label: 'Primary',
    } );

} );

Hier gibt es zwei Probleme:

1. WordPress fügt die Klasse falsch hinzu
2. Es fügt nur eine Klasse hinzu, aber Bootstrap benötigt mindestens zwei

Dies ist der Schaltflächencode nach dem Hinzufügen der Klasse:

<div class="wp-block-button aligncenter is-style-btn-primary">
    <a class="wp-block-button__link" href="#">Button</a>
</div>

Wie Sie sehen können, fügt WordPress die neue Klasse zwei dem div um die Schaltfläche hinzu. Und es fügt hinzu is-style- zur Klasse.

So verwenden Sie den Schaltflächenblock mit Bootstrap-Stilen. Ich brauche einen Code wie diesen:

<div class="wp-block-button aligncenter is-style-btn-primary">
    <a class="btn btn-primary" href="#">Button</a>
</div>

Die Klasse muss innerhalb der sein <a> Tag und ich brauche die zweite Klasse .btn auch.

Gibt es eine Möglichkeit, diese beiden Klassen zu der hinzuzufügen <a> Schild?

Eine andere Möglichkeit, dies zu erledigen, ist die Verwendung von SCSS @extend

Registrieren Sie zuerst Blockstile, die im Schaltflächen-Blockeditor angezeigt werden:

    wp.domReady ( function() {

    wp.blocks.unregisterBlockStyle( 'core/button', 'outline');
    wp.blocks.unregisterBlockStyle( 'core/button', 'fill');
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-default',
        label: 'Bootstrap Default',
        isDefault: true
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-primary',
        label: 'Bootstrap Primary',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-success',
        label: 'Bootstrap Success',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-default-lg',
        label: 'Bootstrap Default Large',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-primary-lg',
        label: 'Bootstrap Primary Large',
    });
    wp.blocks.registerBlockStyle( 'core/button', {
        name: 'bootstrap-success-lg',
        label: 'Bootstrap Success Large',
    }); 

});

Dann habe ich eine _wordpress.scss erstellt, die mit den Regeln aus jedem Blockstil und den erweiterten Bootstrap-Regeln enthalten und kompiliert wird:

.is-style-bootstrap-default > a {
    @extend .btn;
    @extend .btn-default;
}

.is-style-bootstrap-primary > a {
    @extend .btn;
    @extend .btn-primary;
}

.is-style-bootstrap-success > a {
    @extend .btn;
    @extend .btn-success;
}

.is-style-bootstrap-default-lg > a {
    @extend .btn;
    @extend .btn-default;
    @extend .btn-lg;
}

.is-style-bootstrap-primary-lg > a {
    @extend .btn;
    @extend .btn-primary;
    @extend .btn-lg;
}

.is-style-bootstrap-success-lg > a {
    @extend .btn;
    @extend .btn-success;
    @extend .btn-lg;
}

Ich denke, Sie werden feststellen, dass es weniger kompliziert ist, eine eigene Schaltfläche zu schreiben, als eine vorhandene Komponente zu überschreiben. Wenn Sie den Kerntastenblock wirklich überschreiben möchten, müssen Sie wahrscheinlich den entsprechenden anwenden Filter blockieren.

Wenn Sie nach einer sofortigen Lösung suchen, ist die Quelle der Schaltflächenkomponente in der Plugin für erweiterte Bootstrap-Blöcke kann Ihnen den Einstieg erleichtern, oder Sie können über die installieren Plugin-Verzeichnis.

(Vollständige Offenlegung: Ich bin der Autor dieses Plugins.)

Sie können entweder dieses Plugin installieren:
https://wordpress.org/plugins/wp-bootstrap-blocks/

Oder lesen Sie den Plugin-Code und erstellen Sie Ihren eigenen Block, dann können Sie auch Ihre eigenen benutzerdefinierten Stile für Schaltflächen erstellen.