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.
WordPress · Mar 19, 2021 · 6ad2a43 · 6ad2a43
1 parent a4b2b42
commit 6ad2a43
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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' ) },
 ];