wordpress - select specific parameter when block is added - Stack Overflow

admin管理员组

文章数量:1129005

I'm developing gutenberg block as plugin. I what to ensure that when my block added to the post, category that I created on plugin init is selected.

For now I found some useful information here: Stackoverflow link

For now I'm doing like this, but problem is that I need to get category's id, because for now I can set category selected by it's name.

So I need to receive somehow category id, that was created by me. I guess I know it's name and slug.

    // some meta info about category taxnomy, I don't know how to use.
    const allCategories = select('core').getTaxonomy('category');

    //here we receive a list of already selected categories ids.
    const categories = select( 'core/editor' ).getEditedPostAttribute( 'categories' );
    if(!(allCategories && categories)){
        return;
    }

    //rest og code is taken from the link above. except line with dispatch
    if(! categories.includes(CATEGORY_NAME)){

        const newCategories = [...categories, CATEGORY_NAME];

        //Here I have slight different syntax from link above. I need to pass category id to select it, not name. I have 5 because for now I know my category id.
        dispatch( 'core/editor' ).editPost( { 'categories': [5] } );

        const is_category_panel_open = select( 'core/editor' ).isEditorPanelOpened( 'taxonomy-panel-category' );            

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

for newcomers select, dispatch come from wordpress package wordpress dev docs

category is created on 'init' action with wp_insert_term in PHP.

I already tried to receive meta information about category with selecting 'core' and 'core/editor'

Looking through wordpress core store docs

wordpress post editor store docs

wordpress editor's ui store

---

MY SOLUTION WITH API FETCH

import {CATEGORY_SLUG}  from '../../consts';
import {select, dispatch} from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

export function ensureCategorySelected(){
    const categoriesSelected = select( 'core/editor' ).getEditedPostAttribute( 'categories' );
    if(!categoriesSelected) return;
    ensure(categoriesSelected);
}

/** @param {Array} categoriesSelected */
async function ensure(categoriesSelected){
    var id = 0;

    const categories = await apiFetch({
        path: `/wp/v2/categories`,
        method: 'GET',
    });
    
    if(!categories){
        return;
    }

    for(const category of categories){
        if(category.slug === CATEGORY_SLUG){
            id = category.id;
            break;
        }
    }

    if(id === 0){
        return;
    }

    //Create new array for updating selected categories
    const newCategories = [...categoriesSelected, id];

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

    //Get State of Category Panel
    const is_category_panel_open = select( 'core/editor' ).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/editor' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
        dispatch( 'core/editor' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
    }        
}

I'm developing gutenberg block as plugin. I what to ensure that when my block added to the post, category that I created on plugin init is selected.

For now I found some useful information here: Stackoverflow link

For now I'm doing like this, but problem is that I need to get category's id, because for now I can set category selected by it's name.

So I need to receive somehow category id, that was created by me. I guess I know it's name and slug.

    // some meta info about category taxnomy, I don't know how to use.
    const allCategories = select('core').getTaxonomy('category');

    //here we receive a list of already selected categories ids.
    const categories = select( 'core/editor' ).getEditedPostAttribute( 'categories' );
    if(!(allCategories && categories)){
        return;
    }

    //rest og code is taken from the link above. except line with dispatch
    if(! categories.includes(CATEGORY_NAME)){

        const newCategories = [...categories, CATEGORY_NAME];

        //Here I have slight different syntax from link above. I need to pass category id to select it, not name. I have 5 because for now I know my category id.
        dispatch( 'core/editor' ).editPost( { 'categories': [5] } );

        const is_category_panel_open = select( 'core/editor' ).isEditorPanelOpened( 'taxonomy-panel-category' );            

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

for newcomers select, dispatch come from wordpress package wordpress dev docs

category is created on 'init' action with wp_insert_term in PHP.

I already tried to receive meta information about category with selecting 'core' and 'core/editor'

Looking through wordpress core store docs

wordpress post editor store docs

wordpress editor's ui store

---

MY SOLUTION WITH API FETCH

import {CATEGORY_SLUG}  from '../../consts';
import {select, dispatch} from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

export function ensureCategorySelected(){
    const categoriesSelected = select( 'core/editor' ).getEditedPostAttribute( 'categories' );
    if(!categoriesSelected) return;
    ensure(categoriesSelected);
}

/** @param {Array} categoriesSelected */
async function ensure(categoriesSelected){
    var id = 0;

    const categories = await apiFetch({
        path: `/wp/v2/categories`,
        method: 'GET',
    });
    
    if(!categories){
        return;
    }

    for(const category of categories){
        if(category.slug === CATEGORY_SLUG){
            id = category.id;
            break;
        }
    }

    if(id === 0){
        return;
    }

    //Create new array for updating selected categories
    const newCategories = [...categoriesSelected, id];

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

    //Get State of Category Panel
    const is_category_panel_open = select( 'core/editor' ).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/editor' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
        dispatch( 'core/editor' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
    }        
}

• wordpress
• wordpress-gutenberg

Share Improve this question Follow asked Jan 8 at 11:44 Egor DemeshkoEgor Demeshko 1122 bronze badges New contributor Egor Demeshko is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can also cache the category ID to reduce API calls, add error handling for reliability, and optimize performance by only updating categories when necessary.

本文标签： wordpressselect specific parameter when block is addedStack Overflow