Blocks: Update default block categories

docs/designers-developers/developers/data/data-core-blocks.md

@@ -83,7 +83,7 @@ _Parameters_
 
 _Returns_
 
--   `Array`: Categories list.
+-   `Array<WPBlockCategory>`: Categories list.
 
 <a name="getChildBlockNames" href="#getChildBlockNames">#</a> **getChildBlockNames**
 

docs/designers-developers/developers/tutorials/block-tutorial/applying-styles-with-stylesheets.md

@@ -14,7 +14,7 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 
 	icon: 'universal-access-alt',
 
-	category: 'layout',
+	category: 'design',
 
 	example: {},
 
@@ -35,7 +35,7 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 		title: 'Example: Stylesheets',
 		icon: 'universal-access-alt',
-		category: 'layout',
+		category: 'design',
 		example: {},
 		edit: function( props ) {
 			return el(

docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md

@@ -24,7 +24,7 @@ import {
 registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
 	title: 'Example: Controls (esnext)',
 	icon: 'universal-access-alt',
-	category: 'layout',
+	category: 'design',
 	attributes: {
 		content: {
 			type: 'array',
@@ -101,7 +101,7 @@ registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
 	blocks.registerBlockType( 'gutenberg-examples/example-04-controls', {
 		title: 'Example: Controls',
 		icon: 'universal-access-alt',
-		category: 'layout',
+		category: 'design',
 
 		attributes: {
 			content: {

docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md

@@ -61,7 +61,7 @@ import { RichText } from '@wordpress/block-editor';
 registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 	title: 'Example: Editable (esnext)',
 	icon: 'universal-access-alt',
-	category: 'layout',
+	category: 'design',
 	attributes: {
 		content: {
 			type: 'array',
@@ -102,7 +102,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 	blocks.registerBlockType( 'gutenberg-examples/example-03-editable', {
 		title: 'Example: Editable',
 		icon: 'universal-access-alt',
-		category: 'layout',
+		category: 'design',
 
 		attributes: {
 			content: {

docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md

@@ -15,7 +15,7 @@ Here is the basic InnerBlocks usage.
 
 	blocks.registerBlockType( 'gutenberg-examples/example-06', {
 		title: 'Example: Inner Blocks',
-		category: 'layout',
+		category: 'design',
 
 		edit: function( props ) {
 			return el(

docs/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type.md

@@ -61,7 +61,7 @@ const blockStyle = {
 registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
 	title: 'Example: Basic (esnext)',
 	icon: 'universal-access-alt',
-	category: 'layout',
+	category: 'design',
 	example: {},
 	edit() {
 		return <div style={ blockStyle }>Hello World, step 1 (from the editor).</div>;
@@ -85,7 +85,7 @@ registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
 	blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
 		title: 'Example: Basic',
 		icon: 'universal-access-alt',
-		category: 'layout',
+		category: 'design',
 		example: {},
 		edit: function() {
 			return el(

docs/designers-developers/developers/tutorials/javascript/js-build-setup.md

@@ -107,7 +107,7 @@ import { registerBlockType } from '@wordpress/blocks';
 registerBlockType( 'myguten/test-block', {
 	title: 'Basic Example',
 	icon: 'smiley',
-	category: 'layout',
+	category: 'design',
 	edit: () => <div>Hola, mundo!</div>,
 	save: () => <div>Hola, mundo!</div>,
 } );

docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md

@@ -21,7 +21,7 @@ Add this code to your JavaScript file (this tutorial will call the file `myguten
 	registerBlockType( 'myguten/meta-block', {
 		title: 'Meta Block',
 		icon: 'smiley',
-		category: 'common',
+		category: 'text',
 
 		edit: function( props ) {
 			var className = props.className;
@@ -82,7 +82,7 @@ import { useEntityProp } from '@wordpress/core-data';
 registerBlockType( 'myguten/meta-block', {
 	title: 'Meta Block',
 	icon: 'smiley',
-	category: 'common',
+	category: 'text',
 
 	edit( { className, setAttributes, attributes } ) {
 		const postType = useSelect(

docs/rfc/block-registration.md

@@ -64,7 +64,7 @@ To register a new block type, start by creating a `block.json` file. This file:
 {
 	"name": "my-plugin/notice",
 	"title": "Notice",
-	"category": "common",
+	"category": "text",
 	"parent": [ "core/group" ],
 	"icon": "star",
 	"description": "Shows warning, error or success notices  ...",
@@ -134,7 +134,7 @@ This is the display title for your block, which can be translated with our trans
 * Property: `category`
 
 ```json
-{ "category": "common" }
+{ "category": "text" }
 ```
 
 Blocks are grouped into categories to help users browse and discover them.
@@ -149,7 +149,7 @@ The core provided categories are:
 
 Plugins and Themes can also register [custom block categories](/docs/designers-developers/developers/filters/block-filters.md#managing-block-categories).
 
-An implementation should expect and tolerate unknown categories, providing some reasonable fallback behavior (e.g. a "common" category).
+An implementation should expect and tolerate unknown categories, providing some reasonable fallback behavior (e.g. a "text" category).
 
 ### Parent
 

lib/compat.php

@@ -168,6 +168,67 @@ function gutenberg_get_post_from_context() {
 	return get_post();
 }
 
+/**
+ * Filters default block categories to substitute legacy category names with new
+ * block categories.
+ *
+ * This can be removed when plugin support requires WordPress 5.5.0+.
+ *
+ * @see https://core.trac.wordpress.org/ticket/50278
+ *
+ * @param array[] $default_categories Array of block categories.
+ *
+ * @return array[] Filtered block categories.
+ */
+function gutenberg_replace_default_block_categories( $default_categories ) {
+	$substitution = array(
+		'common'     => array(
+			'slug'  => 'text',
+			'title' => __( 'Text', 'gutenberg' ),
+			'icon'  => null,
+		),
+		'formatting' => array(
+			'slug'  => 'media',
+			'title' => __( 'Media', 'gutenberg' ),
+			'icon'  => null,
+		),
+		'layout'     => array(
+			'slug'  => 'design',
+			'title' => __( 'Design', 'gutenberg' ),
+			'icon'  => null,
+		),
+	);
+
+	// Loop default categories to perform in-place substitution by legacy slug.
+	foreach ( $default_categories as $i => $default_category ) {
+		$slug = $default_category['slug'];
+		if ( isset( $substitution[ $slug ] ) ) {
+			$default_categories[ $i ] = $substitution[ $slug ];
+			unset( $substitution[ $slug ] );
+		}
+	}
+
+	/*
+	 * At this point, `$substitution` should contain only the categories which
+	 * could not be in-place substituted with a default category, likely in the
+	 * case that core has since been updated to use the default categories.
+	 * Check to verify they exist.
+	 */
+	$default_category_slugs = wp_list_pluck( $default_categories, 'slug' );
+	foreach ( $substitution as $i => $substitute_category ) {
+		if ( in_array( $substitute_category['slug'], $default_category_slugs, true ) ) {
+			unset( $substitution[ $i ] );
+		}
+	}
+
+	/*
+	 * Any substitutes remaining should be appended, as they are not yet
+	 * assigned in the default categories array.
+	 */
+	return array_merge( $default_categories, array_values( $substitution ) );
+}
+add_filter( 'block_categories', 'gutenberg_replace_default_block_categories' );
+
 /**
  * Shim that hooks into `pre_render_block` so as to override `render_block` with
  * a function that assigns block context.

packages/block-editor/src/autocompleters/test/block.js

@@ -73,14 +73,14 @@ describe( 'block', () => {
 			name: 'core/foo',
 			title: 'foo',
 			keywords: [ 'foo-keyword-1', 'foo-keyword-2' ],
-			category: 'formatting',
+			category: 'design',
 		};
 		const inserterItemWithTitleAndEmptyKeywords = {
 			name: 'core/bar',
 			title: 'bar',
 			// Intentionally empty keyword list
 			keywords: [],
-			category: 'common',
+			category: 'text',
 		};
 		const inserterItemWithTitleAndUndefinedKeywords = {
 			name: 'core/baz',
@@ -91,12 +91,12 @@ describe( 'block', () => {
 
 		expect(
 			blockCompleter.getOptionKeywords( inserterItemWithTitleAndKeywords )
-		).toEqual( [ 'formatting', 'foo-keyword-1', 'foo-keyword-2', 'foo' ] );
+		).toEqual( [ 'design', 'foo-keyword-1', 'foo-keyword-2', 'foo' ] );
 		expect(
 			blockCompleter.getOptionKeywords(
 				inserterItemWithTitleAndEmptyKeywords
 			)
-		).toEqual( [ 'common', 'bar' ] );
+		).toEqual( [ 'text', 'bar' ] );
 		expect(
 			blockCompleter.getOptionKeywords(
 				inserterItemWithTitleAndUndefinedKeywords

packages/block-editor/src/components/block-edit/test/edit.js

@@ -36,7 +36,7 @@ describe( 'Edit', () => {
 		const edit = () => <div />;
 		registerBlockType( 'core/test-block', {
 			save: noop,
-			category: 'common',
+			category: 'text',
 			title: 'block title',
 			edit,
 		} );
@@ -50,7 +50,7 @@ describe( 'Edit', () => {
 		const save = () => <div />;
 		registerBlockType( 'core/test-block', {
 			save,
-			category: 'common',
+			category: 'text',
 			title: 'block title',
 		} );
 
@@ -67,7 +67,7 @@ describe( 'Edit', () => {
 		registerBlockType( 'core/test-block', {
 			edit,
 			save: noop,
-			category: 'common',
+			category: 'text',
 			title: 'block title',
 		} );
 
@@ -84,7 +84,7 @@ describe( 'Edit', () => {
 	it( 'should assign context', () => {
 		const edit = ( { context } ) => context.value;
 		registerBlockType( 'core/test-block', {
-			category: 'common',
+			category: 'text',
 			title: 'block title',
 			context: [ 'value' ],
 			edit,
@@ -104,7 +104,7 @@ describe( 'Edit', () => {
 		it( 'should assign context', () => {
 			const edit = ( { context } ) => context.value;
 			registerBlockType( 'core/test-block', {
-				category: 'common',
+				category: 'text',
 				title: 'block title',
 				context: [ 'value' ],
 				supports: {

packages/block-editor/src/components/block-switcher/test/index.js

@@ -49,7 +49,7 @@ describe( 'BlockSwitcher', () => {
 
 	beforeAll( () => {
 		registerBlockType( 'core/heading', {
-			category: 'common',
+			category: 'text',
 			title: 'Heading',
 			edit: () => {},
 			save: () => {},
@@ -71,7 +71,7 @@ describe( 'BlockSwitcher', () => {
 		} );
 
 		registerBlockType( 'core/paragraph', {
-			category: 'common',
+			category: 'text',
 			title: 'Paragraph',
 			edit: () => {},
 			save: () => {},

packages/block-editor/src/components/inner-blocks/test/index.js

@@ -25,7 +25,7 @@ describe( 'InnerBlocks', () => {
 
 	it( 'should return element as string, with inner blocks', () => {
 		registerBlockType( 'core/fruit', {
-			category: 'common',
+			category: 'text',
 
 			title: 'fruit',
 
@@ -88,7 +88,7 @@ describe( 'InnerBlocks', () => {
 					</p>
 				);
 			},
-			category: 'common',
+			category: 'text',
 			title: 'block title',
 		};
 		registerBlockType( 'core/test-block', blockType );