From 6ad2a433769a4514fc52083e97aa47a0bc9edf07 Mon Sep 17 00:00:00 2001
From: Matias Ventura <mv@matiasventura.com>
Date: Fri, 19 Mar 2021 16:52:36 +0100
Subject: [PATCH] Add "theme" category and better present template parts in the
 inserter (#30020)

* Introduce "theme" category for blocks.
* Assign template-part block to "theme" category.
* Use layout icon for template parts.
* Make header and footer variations available in the inserter.
---
 lib/blocks.php                                  | 17 +++++++++++++++++
 .../components/inserter/test/fixtures/index.js  |  1 +
 .../block-library/src/template-part/block.json  |  2 +-
 .../block-library/src/template-part/index.js    |  2 ++
 .../src/template-part/variations.js             |  4 ++--
 packages/blocks/src/store/reducer.js            |  1 +
 6 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/lib/blocks.php b/lib/blocks.php
index ed2c9c48f4d726..cea036df5a878e 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -344,3 +344,20 @@ function gutenberg_register_legacy_social_link_blocks() {
 }
 
 add_action( 'init', 'gutenberg_register_legacy_social_link_blocks' );
+
+/**
+ * Filters the default block categories array to add a new one for themes.
+ * Should be removed and turned into a core.trac ticket for merge.
+ *
+ * @param array $categories The list of default block categories.
+ */
+function gutenberg_register_theme_block_category( $categories ) {
+	$categories[] = array(
+		'slug'  => 'theme',
+		'title' => _x( 'Theme', 'block category' ),
+		'icon'  => null,
+	);
+	return $categories;
+}
+
+add_filter( 'block_categories', 'gutenberg_register_theme_block_category' );
diff --git a/packages/block-editor/src/components/inserter/test/fixtures/index.js b/packages/block-editor/src/components/inserter/test/fixtures/index.js
index c46620ec156dcf..b900af0b732a06 100644
--- a/packages/block-editor/src/components/inserter/test/fixtures/index.js
+++ b/packages/block-editor/src/components/inserter/test/fixtures/index.js
@@ -3,6 +3,7 @@ export const categories = [
 	{ slug: 'media', title: 'Media' },
 	{ slug: 'design', title: 'Design' },
 	{ slug: 'widgets', title: 'Widgets' },
+	{ slug: 'theme', title: 'Theme' },
 	{ slug: 'embed', title: 'Embeds' },
 	{ slug: 'reusable', title: 'Reusable blocks' },
 ];
diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json
index 6e5c9835cbf7da..4d6b3dab122bd7 100644
--- a/packages/block-library/src/template-part/block.json
+++ b/packages/block-library/src/template-part/block.json
@@ -1,7 +1,7 @@
 {
 	"apiVersion": 2,
 	"name": "core/template-part",
-	"category": "design",
+	"category": "theme",
 	"attributes": {
 		"slug": {
 			"type": "string"
diff --git a/packages/block-library/src/template-part/index.js b/packages/block-library/src/template-part/index.js
index d47caa88f63390..46a0e5bc684fce 100644
--- a/packages/block-library/src/template-part/index.js
+++ b/packages/block-library/src/template-part/index.js
@@ -9,6 +9,7 @@ import { startCase } from 'lodash';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
+import { layout } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,6 +26,7 @@ export const settings = {
 	description: __(
 		'Edit the different global regions of your site, like the header, footer, sidebar, or create your own.'
 	),
+	icon: layout,
 	keywords: [ __( 'template part' ) ],
 	__experimentalLabel: ( { slug, theme } ) => {
 		// Attempt to find entity title if block is a template part.
diff --git a/packages/block-library/src/template-part/variations.js b/packages/block-library/src/template-part/variations.js
index 86cf023b2f497a..2653c0dadf96aa 100644
--- a/packages/block-library/src/template-part/variations.js
+++ b/packages/block-library/src/template-part/variations.js
@@ -29,7 +29,7 @@ const variations = [
 		),
 		icon: header,
 		isActive: createIsActiveBasedOnArea( 'header' ),
-		scope: [],
+		scope: [ 'inserter' ],
 	},
 	{
 		name: 'footer',
@@ -39,7 +39,7 @@ const variations = [
 		),
 		icon: footer,
 		isActive: createIsActiveBasedOnArea( 'footer' ),
-		scope: [],
+		scope: [ 'inserter' ],
 	},
 ];
 
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index 3bbe4ea1fa5619..f0cb1632805fe5 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -36,6 +36,7 @@ export const DEFAULT_CATEGORIES = [
 	{ slug: 'media', title: __( 'Media' ) },
 	{ slug: 'design', title: __( 'Design' ) },
 	{ slug: 'widgets', title: __( 'Widgets' ) },
+	{ slug: 'theme', title: __( 'Theme' ) },
 	{ slug: 'embed', title: __( 'Embeds' ) },
 	{ slug: 'reusable', title: __( 'Reusable blocks' ) },
 ];