Block categories - ensure that categories are unique by slug.

[Chrico]

Fixes #50061

What?

Block categories can be registered through backend by hooking into the "block_categories_all"-filter or through frontend by calling wp.blocks.setCategories(). Both require an array of WPBlockCategory elements. This change aims for making the categories: WPBlockCategory[] with unique entries by slug to avoid rendering in Block Inserter all Blocks duplicated.

See also: #50061

---

Testing Instructions

Go to "New Post" (or "Edit Post"), open DevTools and insert following:

const cateogries = wp.blocks.getCategories();
wp.blocks.setCategories( [
    ... cateogries, 
    ... [ {'slug':'theme', 'title': 'My title'}, {'slug':'theme', 'title': 'Meeeh'} ] 
);

Open afterwards the "Block Inserter". You will see now "Theme", "My Title" and "Meeeh" with exactly 3 times the same Blocks. With this fix we ensure, that only 1 Group is shown with the Blocks.

---

Open Questions

Right now, the last entry "wins". Should we show a message ( console.info()?) when an entry is overwritten by a matching slug?

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Chrico <chrico@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Chrico! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[talldan]

Thanks for the contribution @Chrico! Would you be able to add a unit test as well that tests the uniqueness?

This is where the tests are currently located:

gutenberg/packages/blocks/src/store/test/reducer.js

Lines 405 to 520 in 1c3e7be

	describe( 'categories', () => {
	it( 'should return the default categories as default state', () => {
	expect( categories( undefined, {} ) ).toEqual( DEFAULT_CATEGORIES );
	} );
	it( 'should override categories', () => {
	const original = deepFreeze( [
	{ slug: 'chicken', title: 'Chicken' },
	] );
	const state = categories( original, {
	type: 'SET_CATEGORIES',
	categories: [ { slug: 'wings', title: 'Wings' } ],
	} );
	expect( state ).toEqual( [ { slug: 'wings', title: 'Wings' } ] );
	} );
	it( 'should add the category icon', () => {
	const original = deepFreeze( [
	{
	slug: 'chicken',
	title: 'Chicken',
	},
	] );
	const state = categories( original, {
	type: 'UPDATE_CATEGORY',
	slug: 'chicken',
	category: {
	icon: 'new-icon',
	},
	} );
	expect( state ).toEqual( [
	{
	slug: 'chicken',
	title: 'Chicken',
	icon: 'new-icon',
	},
	] );
	} );
	it( 'should update the category icon', () => {
	const original = deepFreeze( [
	{
	slug: 'chicken',
	title: 'Chicken',
	icon: 'old-icon',
	},
	{
	slug: 'wings',
	title: 'Wings',
	icon: 'old-icon',
	},
	] );
	const state = categories( original, {
	type: 'UPDATE_CATEGORY',
	slug: 'chicken',
	category: {
	icon: 'new-icon',
	},
	} );
	expect( state ).toEqual( [
	{
	slug: 'chicken',
	title: 'Chicken',
	icon: 'new-icon',
	},
	{
	slug: 'wings',
	title: 'Wings',
	icon: 'old-icon',
	},
	] );
	} );
	it( 'should update multiple category properties', () => {
	const original = deepFreeze( [
	{
	slug: 'chicken',
	title: 'Chicken',
	icon: 'old-icon',
	},
	{
	slug: 'wings',
	title: 'Wings',
	icon: 'old-icon',
	},
	] );
	const state = categories( original, {
	type: 'UPDATE_CATEGORY',
	slug: 'wings',
	category: {
	title: 'New Wings',
	chicken: 'ribs',
	},
	} );
	expect( state ).toEqual( [
	{
	slug: 'chicken',
	title: 'Chicken',
	icon: 'old-icon',
	},
	{
	slug: 'wings',
	title: 'New Wings',
	chicken: 'ribs',
	icon: 'old-icon',
	},
	] );
	} );

[Chrico]

Thanks for the contribution @Chrico! Would you be able to add a unit test as well that tests the uniqueness?

Here we go: a72049a ;-)

[talldan]

Code looks good and this is testing well, thank you for the contribution

[Chrico]

Thanks...but I also missed to write the changelog...This is a breaking fix change (in theory), right? 👀

[talldan]

If you want to make a PR for that, I'd be happy to merge it too, you can add an entry to the 'Unreleased' section in the blocks package. I'd personally consider it a bug fix, I'm not sure I'd consider it a breaking change. The package's interface is still the same, it's only the internal behavior that's very slightly different.