Estoy intentando agregar / eliminar la etiqueta / categoría de una publicación de un complemento de la barra lateral de WordPress Gutenberg (usando React / JavaScript). Parece que hay muy poca información sobre la implementación de este caso de uso y estoy buscando información de la comunidad sobre un enfoque viable que pueda haber encontrado.
Implementación actual :
Tengo un complemento de barra lateral, con varios paneles. Una vez de estos se encarga de agregar/eliminar categorías/etiquetas de un Post. Los componentes se renderizan usando:
MyComponent = props => { return ( <PanelBody title="My Title"> <PanelRow> <TabPanel className="tab-panel" activeClass="active-tab" onSelect={(tabName) => props.onItemChange(tabName)} tabs={_data} > {tab => ( <div className="tab-content"> <div className="description" dangerouslySetInnerHTML={{ __html: tab.description }} ></div> <div className="actions"> <Button isSecondary onClick={() => props.onTaxonomiesAdd(props.category, props.tag)}>Add Tag / Category!</Button> </div> </div> )} </TabPanel> </PanelRow> </PanelBody> ); };Cuando se hace clic en el botón, me gustaría agregar etiquetas/categorías designadas a la publicación. El evento de clic se detecta con éxito y se activa dentro del componente de orden superior WithDispatch de la siguiente manera:
export default compose([ withSelect(select => { // WithSelect Routines Here }), withDispatch(dispatch => { return { onTaxonomiesAdd: (category, tag) => { //Add Taxonomy Items here alert("I'm firing successfully"); } }El enfoque más cercano con el que me he topado hasta ahora usa:
wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'contributor', currentPost.id, { 'topic': [ term_id ] } );... pero todavía tengo que hacer que algo similar funcione correctamente.
¿Alguno de ustedes ha encontrado una solución para lograr este resultado?
Siguiendo el enlace anterior, implementé el caso de uso con éxito agregando lo siguiente fuera de mi componente como funciones de utilidad (que podrían reutilizarse):
//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' ); } } }Espero que esto sea útil para cualquier otra persona en la comunidad que busque implementar este caso de uso.