Wp-calypso: Editor: Organize editor inserter menu in user friendly way

Created on 29 Aug 2019  路  5Comments  路  Source: Automattic/wp-calypso

Our editor inserter menu group organization on WordPress.com looks like this:

Screen Shot 2019-08-29 at 11 07 47 AM

This is a mix of plugin groupings and block type groupings, and is not very user friendly. Our users on WordPress.com simple sites have not installed CoBlocks or Jetpack, so the plugin groupings are confusing. We need to organize groups in a more user intuitive way.

I think the first step here is moving third party plugins from the top of the inserter, and grouping 3rd party blocks lower in the menu. CoBlocks should not be showing above "Common Blocks" for example.

There is some work happening in core Gutenberg to better organize groups: https://github.com/WordPress/gutenberg/issues/11406

Let's contribute to the ideas there, and help inform that work with any usage data we can provide to help core Gutenberg with the most effective ordering.

/cc @kwight @mmtr @shaunandrews @mtias

[Goal] Editor Improvements

Most helpful comment

it's only right to not hide that.

I get that perspective, but from a users point of view there's no understanding what a "CoBlock" is and we shouldn't be grouping things with branded names. The blocks themselves can/should be branded in someway, but the groupings likely isn't the best solution for customers.

All 5 comments

From a technical point of view, we can customize the categories in WP.com with the current tools available in Gutenberg:

import { getCategories, setCategories } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';
import { addFilter } from '@wordpress/hooks';

const changeBlocksCategories = ( settings, name ) => {
    if ( 'coblocks' === settings.category ) {
        settings.category = 'common';
    }
    if ( 'coblocks-gallery' === settings.category ) {
        settings.category = 'wpcom-category-1';
    }
    if ( 'jetpack' === settings.category ) {
        settings.category = 'wpcom-category-2';
    }
    return settings.
} );

addFilter( 'blocks.registerBlockType', 'wpcom/categories', changeBlocksCategories );

setCategories( [
    {
        slug: 'wpcom-category-1',
        title: 'Custom WP.com category 1',
        icon: <svg>...</svg>,
    },
    {
        slug: 'wpcom-category-2',
        title: 'Custom WP.com category 2',
        icon: <svg>...</svg>,
    },
    ...getCategories().filter( ( { slug } ) => ! [ 'coblocks-galleries', 'coblocks', 'jetpack' ].includes( slug ) ),
] );

Oh cool, that's great. Even if we push it down the list, we need to keep CoBlocks clearly marked as so; we're benefitting from community contributions, it's only right to not hide that.

it's only right to not hide that.

I get that perspective, but from a users point of view there's no understanding what a "CoBlock" is and we shouldn't be grouping things with branded names. The blocks themselves can/should be branded in someway, but the groupings likely isn't the best solution for customers.

Unregistering these categories on .com and re-registering something like block collections would be neat: https://github.com/WordPress/gutenberg/issues/16866

I think that way it would be possible to solve some of the branding questions, too.

I'll close this as outdated.

Was this page helpful?
0 / 5 - 0 ratings