Changing order of block categories

  • I have some custom blocks created that are organized into three categories. These three categories appear at the bottom of the list of block categories in the editor. I’m wondering if anyone knows how to change the order that the custom categories appear in the list so I can make them appear at the top or in a specific place?

    
function my_plugin_block_categories( $categories, $post ) {
  if ( $post->post_type !== 'page' ) {
    return $categories;
  }
  return array_merge(
    $categories,
    array(
      array(
        'slug' => 'category-dr',
        'title' => __( 'DragonRidge Blocks', 'my-plugin' ),
        //'icon'  => 'admin-home',
      ),
      array(
        'slug' => 'dr-dashboard',
        'title' => __( 'DragonRidge Dashboard', 'my-plugin' ),
        //'icon'  => 'admin-home',
      ),
      array(
        'slug' => 'category-home',
        'title' => __( 'DragonRidge Home Page', 'my-plugin' ),
        //'icon'  => 'admin-home',
      ),
    )
  );
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    You can do so with custom admin styling. Make the overall container div (class block-editor-inserter__menu) display as a flex box, then set the order of individual items as desired. You’ll need to use :nth_child() pseudo-selectors to target individual categories for ordering.

    You can add custom admin stylesheets with wp_enqueue_style() called from a callback added to the “admin_enqueue_scripts” action.

    Thread Starter vectyr

    (@vectyr)

    That’s not a bad idea, however, with the new update to WordPress where the blocks appear in a sidebar, this doesn’t look like it is going to work because the block editor title is separate from the content. If they were in the same div, it would be easy to sort. But now you’d have to sort the titles and the content individually.

    Moderator bcworkz

    (@bcworkz)

    I suppose you could have JavaScript reorder the nodes involved. You still have the problem of having to do it separately for titles and content. I don’t see it as any easier than CSS. If you’re looking for a simple parameter like sort DESC instead of ASC I don’t think one exists, but I’ve not investigated that far into it.

    oscarasking

    (@oscarasking)

    Hi @vectyr,

    You can do so with array_unshift php function. According to the documentation, you can do something like this:

    function my_plugin_block_categories( $categories, $post ) {
  if ( $post->post_type !== 'page' ) {
    return $categories;
  }
  $custom_category_one = array(
    'slug' => 'category-dr',
    'title' => __( 'DragonRidge Blocks', 'my-plugin' ),
    //'icon'  => 'admin-home',
  );
  $custom_category_two = array(
    'slug' => 'dr-dashboard',
    'title' => __( 'DragonRidge Dashboard', 'my-plugin' ),
    //'icon'  => 'admin-home',
  );
  $custom_category_three = array(
    'slug' => 'category-home',
    'title' => __( 'DragonRidge Home Page', 'my-plugin' ),
    //'icon'  => 'admin-home',
  );

  array_unshift( $categories, $custom_category_one, $custom_category_two, $custom_category_three );
  return $categories;
}
add_filter( 'block_categories', 'my_plugin_block_categories', 10, 2 );

    And you will get this result:

    Array
(
    [0] => Array
        (
            [slug] => category-dr
            [title] => DragonRidge Blocks
            [icon] => admin-home
        )

    [1] => Array
        (
            [slug] => dr-dashboard
            [title] => DragonRidge Dashboard
            [icon] => admin-home
        )

    [2] => Array
        (
            [slug] => category-home
            [title] => DragonRidge Home Page
            [icon] => admin-home
        )

    [3] => Array
        (
            [slug] => text
            [title] => Text
            [icon] => 
        )

    [4] => Array
        (
            [slug] => media
            [title] => Media
            [icon] => 
        )

    [5] => Array
        (
            [slug] => design
            [title] => Design
            [icon] => 
        )

    [6] => Array
        (
            [slug] => widgets
            [title] => Widgets
            [icon] => 
        )

    [7] => Array
        (
            [slug] => embed
            [title] => Embeds
            [icon] => 
        )

    [8] => Array
        (
            [slug] => reusable
            [title] => Reusable Blocks
            [icon] => 
        )
)
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing order of block categories’ is closed to new replies.