Speichern von Tags, die programmgesteuert in Gutenberg angewendet werden

Lesezeit: 4 Minuten

Ich habe eine Routine implementiert, um Tags/Kategorien programmatisch auf einen Beitrag in Gutenberg anzuwenden. Der Code dafür ist in meiner letzten Frage unter: https://stackoverflow.com/a/70029499/40593 zu sehen und wird auch unten dargestellt:

//Add Tag & Category in one call
function AddTaxonomies(tag, category){
    AddTag(tag);
    AddCategory(category);
}

//Add Tag & Refresh Panel
function AddTag(tag){

    //Get Current Selected Tags
    let tags = select( 'core/editor' ).getEditedPostAttribute( 'tags' );

    //Get State of Tag Panel
    let is_tag_panel_open = select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-tags' );

    //Verify new tag isn't already selected
    if(! tags.includes(tag)){

        //Add new tag to existing list
        tags.push(tag);

        //Update Post with new tags
        dispatch( 'core/editor' ).editPost( { 'tags': tags } );

        // Verify if the tag panel is open
        if ( is_tag_panel_open ) {

            // Close and re-open the tag panel to reload data / refresh the UI
            dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-tags' );
            dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-tags' );
        }            
    }

}

//Add Category & Refresh Panel
function AddCategory(category){

    //Get Current Selected Categories
    let categories = select( 'core/editor' ).getEditedPostAttribute( 'categories' );

    //Get State of Category Panel
    let is_category_panel_open = select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-category' );

    //Verify new category isn't already selected
    if(! categories.includes(category)){

        //Add new tag to existing list
        categories.push(category);

        //Update Post with new tags
        dispatch( 'core/editor' ).editPost( { 'categories': categories } );

        // Verify if the category panel is open
        if ( is_category_panel_open ) {

            // Close and re-open the category panel to reload data / refresh the UI
            dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
            dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
        }            
    }
}

Dieser Code wendet ein Tag / eine Kategorie auf einen Beitrag in Gutenberg an (aktualisiert auch die Benutzeroberfläche, um dies widerzuspiegeln) und kann überprüft werden, ob er den Redux-Speicher für den Beitrag aktualisiert hat, indem Sie Folgendes verwenden:

wp.data.select( 'core/editor' ).getEditedPostAttribute( 'tags' )

Allerdings sind mir zwei Probleme aufgefallen:

  1. Erstens löst das einfache Aktualisieren der Tags / Kategorien auf diese Weise nicht aus, dass die Schaltfläche “Aktualisieren” für den Beitrag aktiv wird. Um dies zu umgehen, muss ich ein privates Metafeld aktualisieren, dann wird es aktiv.
  2. Wenn Sie dieses Problem umgangen haben, indem Sie ein privates Metafeld aktualisiert haben, dann haben Sie für den Beitrag auf Aktualisieren geklickt. Die Benutzeroberfläche wird neu geladen, aber die neuen Tags/Kategorien werden nicht gespeichert und anschließend aus der Benutzeroberfläche gelöscht.

Irgendein Rat?

Mit Dank an @harisrozak über das Gutenberg-Github-Repo wurde die folgende Lösung gefunden.

Insbesondere glaube ich, dass, weil ich dasselbe Array zum Lesen der ausgewählten Tags/Kategorien verwendet habe, wie ich sie damals aktualisiert habe, React/Redux diese Daten nicht als geändert erkannt hat und daher die Datenbank nicht richtig aktualisiert hat (trotz sowohl die Benutzeroberfläche als auch der Redux-Speicher werden aktualisiert).

    //Add Category & Refresh Panel
    function AddCategory(category){

        //Get Current Selected Categories
        let categories = select( 'core/editor' ).getEditedPostAttribute( 'categories' );

        //Verify new category isn't already selected
        if(! categories.includes(category)){

            //Create new array for updating selected categories
            var new_categories = [category];

            //Add categories already selected into new array
            for (let i = 0; i < categories.length; i++) {

                //Get current category
                const selected_id = categories[i];

                //Check category isnt included already
                if ( ! new_categories.includes( selected_id ) ) {
                    new_categories.push(selected_id);
                }
            } 

            //Update Post with new categories
            updateState(() => dispatch( 'core/editor' ).editPost( { 'categories': new_categories } ));

            //Get State of Category Panel
            let is_category_panel_open = select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-category' );            

            // Verify if the category panel is open
            if ( is_category_panel_open ) {

                // Close and re-open the category panel to reload data / refresh the UI
                dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
                dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
            }        
        }
    }

Ref: Kern bereitgestellt von @harisrozak

  • Mit Tags funktioniert das bei mir nicht. Können Sie erläutern, ob das Schließen und erneute Öffnen des Panels erforderlich ist? Das Erstellen eines neuen Arrays mit allen Tags aktualisiert die Benutzeroberfläche, sendet die neuen Tags jedoch nicht an den Server, wenn Sie auf die Schaltfläche „Aktualisieren“ klicken.

    – Papa Mufflon

    10. Mai um 12:46 Uhr

  • @PapaMufflon – Das Schließen / erneute Öffnen dient zum Aktualisieren der Benutzeroberfläche, sodass die neuesten hinzugefügten Tags angezeigt werden. Ich denke, es lohnt sich, dies beizubehalten, um den Endbenutzer nicht zu verwirren. Betreff: Aktualisierung des Beitrags, ist der Aktualisierungsvorgang aktiv (dh die Schaltfläche ist aktiviert)? Und speichert der Beitrag ansonsten den Inhalt, nur nicht die Tags?

    – Matt Woodward

    17. Mai um 1:20 Uhr

  • @PapaMufflon – haben Sie auch überprüft, ob der Redux-Speicher aktualisiert wird mit: wp.data.select( ‘core/editor’ ).getEditedPostAttribute( ‘tags’ ) nachdem die Änderung angewendet wurde?

    – Matt Woodward

    17. Mai um 1:24 Uhr

1016460cookie-checkSpeichern von Tags, die programmgesteuert in Gutenberg angewendet werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy