So verwerfen Sie Gutenberg-Blöcke

Eines der häufigsten Probleme beim Aktualisieren eines Themes oder Plugins mit Gutenberg-Blöcken ist, dass Änderungen am Blockcode alle vorhandenen Beiträge, die diesen Block verwenden, beschädigen. Glücklicherweise bietet WordPress eine Lösung; eine Möglichkeit, Blöcke zu verwerfen. In diesem Beitrag sehen wir uns an, wie das geht.

Wenn Sie bereits mit der Entwicklung von Blöcken gearbeitet haben, kennen Sie wahrscheinlich diesen Blockfehler, wenn Sie einen Block hinzugefügt und später die saveFunktion geändert haben.

Dies geschieht, weil WordPress den gespeicherten Block in der Datenbank mit dem aktuellen Code in der saveFunktion in deinem Block vergleicht und sie nicht übereinstimmen. WordPress ist nicht in der Lage, den Unterschied auszubessern. In den meisten Fällen können Sie auf die drei Punkte auf dem Block klicken und „Blockwiederherstellung versuchen” auswählen. Wenn die Änderungen an der saveFunktion geringfügig waren (z. B. eine Klassenänderung), kann WordPress den Block wiederherstellen. Im schlimmsten Fall können Sie den Block wiederherstellen. d müssen Sie auf „In HTML konvertieren" klicken, und Sie verlieren die editFunktionalität Ihres Blocks. Natürlich können wir nicht erwarten, dass die Benutzer unseres Blockcodes manuell alle Posts finden, die diesen Block verwenden, und diese Schritte für jeden einzelnen ausführen.

Bevor wir also Aktualisierungen an der saveFunktion vornehmen, fügen wir Code hinzu, um WordPress mitzuteilen, wie es mit alten Inhalten umgehen soll, die mit der alten saveFunktion gespeichert wurden.

Kommen wir zum Code!

Es ist eigentlich ziemlich einfach. Kurz gesagt, was wir tun müssen, ist; Fügen Sie dem Funktionsaufruf eine deprecatedEigenschaft hinzu registerBlockType(). Diese Eigenschaft erwartet ein Array. Das bedeutet, dass Sie einen Block mehrmals verwerfen können, indem Sie mehrere Einträge im Array bereitstellen. Jede Abschreibung ist als ein Objekt definiert, das das vollständige attributesEigentum und die (alte) saveFunktion besitzt.

Mit anderen Worten, Sie definieren eine deprecatedEigenschaft als Array und kopieren dann die Funktionen attributesund saveFunktionen Ihres Blocks hinein. Sie müssen Attribute einschließen, obwohl Sie in dem Update nichts daran ändern. Sie müssen die editFunktion nicht in die Abschreibung aufnehmen.

deprecated: [
    {
        attributes: { ... },
        save: (props) => { ... }
    }
]

Sehen wir uns das in einem praktischeren Beispiel an.

Angenommen, unser Blockcode sieht in etwa so aus. Die editFunktion entfällt, da wir uns bei der Abschreibung nicht damit befassen müssen.

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;
 
import edit from './edit';
 
registerBlockType( 'awp/deprecated-block-example', {
    title: __( 'Example of deprecating a block' ),
    icon: 'format-aside',
    category: 'widgets',
    attributes: {
        alignment: {
            type: 'string',
            default: 'center'
        },
        exampleString: {
            type: 'string'
        },
    },
    edit,
    save: (props) => { 
        const { exampleString } = props;
        return(
            <div className="deprecated-block-example">
                <RichText.Content value={ exampleString } />
            </div>
        );
    }
});

Nehmen wir dann an, dass wir Änderungen an beiden Attributen vornehmen und speichern und das Aufbrechen bestehender Blöcke vermeiden möchten. Wir fügen die deprecatedEigenschaft hinzu und kopieren das Ganze attributesund saveals Array-Element hinein. Dann sind wir frei, Änderungen an attributesoder/und saveFunktion vorzunehmen.

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;
 
import edit from './edit';
 
registerBlockType( 'awp/deprecated-block-example', {
    title: __( 'Example of deprecating a block' ),
    icon: 'format-aside',
    category: 'widgets',
    attributes: {
        alignment: {
            type: 'string',
            default: 'center'
        },
        exampleString: {
            type: 'string'
        },
        newThing: {
            type: 'string'
        },
    },
    edit,
    save: (props) => { 
        const { exampleString, newThing } = props;
        return(
            <div className="deprecated-block-example">
                <RichText.Content value={ exampleString } />
                <div className="new-content">
                    <RichText.Content value={ newThing } />
                </div>
            </div>
        );
    },
    deprecated: [
        {
            attributes: {
                alignment: {
                    type: 'string',
                    default: 'center'
                },
                exampleString: {
                    type: 'string'
                },
            },
            save: (props) => { 
                const { exampleString } = props;
                return(
                    <div className="deprecated-block-example">
                        <RichText.Content value={ exampleString } />
                    </div>
                );
            },
        }
    ]
});

Mit diesem kompilierten Code können Sie einen vorhandenen Beitrag mit dem alten Blockcode finden, und Sie sollten keinen beschädigten Code erhalten!

WordPress findet heraus, dass der Block unseren veralteten Code verwendet, und lädt den Inhalt mit dem veralteten saveCode. Sobald Sie Änderungen am Block vornehmen und den Beitrag aktualisieren, wird der Block mit der neuen saveFunktion gespeichert.

Höhere Abschreibungen und weiterführende Lektüre

Das obige Codebeispiel ist die grundlegendste Form der Abschreibung. WordPress unterstützt mehr Funktionen, wie z. B. das Einschließen migratevon supportsund sogar das Zuweisen von Konstanten (denken Sie an Versionsnummern) an Ihren veralteten Code. Werfen Sie einen Blick auf die WordPress-Dokumentation zur Blockabschreibung.