Enable Block Renaming support for (almost) all blocks (#54426)

* Enable Rename support for various blocks * Register metadata attribute for all blocks * Use new block supports and default to true for all blocks * Selectively disable for certain blocks * Remove unused supports * Consider accessibility mode when computing paragraph label * Rename hook to supports feature * Docs * Remove redundant metadata support from paragraph * Add test for block’s that don’t support rename * Move registration of metadata attribute out of experimental * Lint * Make block support non-experimental See https://github.com/WordPress/gutenberg/pull/54426/files#r1334343353 * Revert unintended formatting changes * Rename support to just “renaming” * Remove unneeded filter This also caused unit test failures in packages/editor/src/store/test/selectors.js
WordPress · Oct 10, 2023 · 7aa5a91 · 7aa5a91
1 parent 6d42053
commit 7aa5a91
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 88 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -41,7 +41,7 @@ Create and save content to reuse across your site. Update the pattern, and the c
 
 -	**Name:** core/block
 -	**Category:** reusable
--	**Supports:** ~~customClassName~~, ~~html~~, ~~inserter~~
+-	**Supports:** ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** ref
 
 ## Button
@@ -459,7 +459,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 
 -	**Name:** core/navigation
 -	**Category:** theme
--	**Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~
 -	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
 
 ## Custom Link
@@ -526,7 +526,7 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
 
 -	**Name:** core/pattern
 -	**Category:** theme
--	**Supports:** ~~html~~, ~~inserter~~
+-	**Supports:** ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** slug
 
 ## Author
@@ -907,7 +907,7 @@ Edit the different global regions of your site, like the header, footer, sidebar
 
 -	**Name:** core/template-part
 -	**Category:** theme
--	**Supports:** align, ~~html~~, ~~reusable~~
+-	**Supports:** align, ~~html~~, ~~renaming~~, ~~reusable~~
 -	**Attributes:** area, slug, tagName, theme
 
 ## Term Description

diff --git a/lib/blocks.php b/lib/blocks.php
@@ -466,3 +466,25 @@ function gutenberg_should_render_lightbox( $block ) {
 }
 
 add_filter( 'render_block_data', 'gutenberg_should_render_lightbox', 15, 1 );
+
+/**
+ * Registers the metadata block attribute for all block types.
+ *
+ * @param array $args Array of arguments for registering a block type.
+ * @return array $args
+ */
+function gutenberg_register_metadata_attribute( $args ) {
+	// Setup attributes if needed.
+	if ( ! isset( $args['attributes'] ) || ! is_array( $args['attributes'] ) ) {
+		$args['attributes'] = array();
+	}
+
+	if ( ! array_key_exists( 'metadata', $args['attributes'] ) ) {
+		$args['attributes']['metadata'] = array(
+			'type' => 'object',
+		);
+	}
+
+	return $args;
+}
+add_filter( 'register_block_type_args', 'gutenberg_register_metadata_attribute' );
diff --git a/lib/experimental/blocks.php b/lib/experimental/blocks.php
@@ -79,27 +79,6 @@ function wp_enqueue_block_view_script( $block_name, $args ) {
 }
 
 
-/**
- * Registers the metadata block attribute for block types.
- *
- * @param array $args Array of arguments for registering a block type.
- * @return array $args
- */
-function gutenberg_register_metadata_attribute( $args ) {
-	// Setup attributes if needed.
-	if ( ! isset( $args['attributes'] ) || ! is_array( $args['attributes'] ) ) {
-		$args['attributes'] = array();
-	}
-
-	if ( ! array_key_exists( 'metadata', $args['attributes'] ) ) {
-		$args['attributes']['metadata'] = array(
-			'type' => 'object',
-		);
-	}
-
-	return $args;
-}
-add_filter( 'register_block_type_args', 'gutenberg_register_metadata_attribute' );
 
 
 $gutenberg_experiments = get_option( 'gutenberg-experiments' );

diff --git a/packages/block-editor/src/hooks/block-rename-ui.js b/packages/block-editor/src/hooks/block-rename-ui.js
@@ -4,7 +4,7 @@
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { __, sprintf } from '@wordpress/i18n';
-import { getBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	MenuItem,
 	__experimentalHStack as HStack,
@@ -191,15 +191,7 @@ export const withBlockRenameControl = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { clientId, name, attributes, setAttributes } = props;
 
-		const metaDataSupport = getBlockSupport(
-			name,
-			'__experimentalMetadata',
-			false
-		);
-
-		const supportsBlockNaming = !! (
-			true === metaDataSupport || metaDataSupport?.name
-		);
+		const supportsBlockNaming = hasBlockSupport( name, 'renaming', true );
 
 		return (
 			<>

diff --git a/...s/block-editor/src/hooks/metadata-name.js → .../block-editor/src/hooks/block-renaming.js b/...s/block-editor/src/hooks/metadata-name.js → .../block-editor/src/hooks/block-renaming.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-/**
- * Internal dependencies
- */
-import { hasBlockMetadataSupport } from './metadata';
+import { hasBlockSupport } from '@wordpress/blocks';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -20,10 +17,10 @@ export function addLabelCallback( settings ) {
 		return settings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
+	const supportsBlockNaming = hasBlockSupport(
 		settings,
-		'name',
-		false // default value
+		'renaming',
+		true // default value
 	);
 
 	// Check whether block metadata is supported before using it.

diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
@@ -19,9 +19,9 @@ import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';
-import './metadata-name';
 import './custom-fields';
 import './block-hooks';
+import './block-renaming';
 import './block-rename-ui';
 
 export { useCustomSides } from './dimensions';

diff --git a/packages/block-editor/src/hooks/metadata.js b/packages/block-editor/src/hooks/metadata.js
@@ -2,19 +2,8 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport } from '@wordpress/blocks';
-
 const META_ATTRIBUTE_NAME = 'metadata';
 
-export function hasBlockMetadataSupport( blockType, feature = '' ) {
-	// Only core blocks are allowed to use __experimentalMetadata until the fetaure is stablised.
-	if ( ! blockType.name.startsWith( 'core/' ) ) {
-		return false;
-	}
-	const support = getBlockSupport( blockType, '__experimentalMetadata' );
-	return !! ( true === support || support?.[ feature ] );
-}
-
 /**
  * Filters registered block settings, extending attributes to include `metadata`.
  *
@@ -29,39 +18,18 @@ export function addMetaAttribute( blockTypeSettings ) {
 		return blockTypeSettings;
 	}
 
-	const supportsBlockNaming = hasBlockMetadataSupport(
-		blockTypeSettings,
-		'name'
-	);
-
-	if ( supportsBlockNaming ) {
-		blockTypeSettings.attributes = {
-			...blockTypeSettings.attributes,
-			[ META_ATTRIBUTE_NAME ]: {
-				type: 'object',
-			},
-		};
-	}
+	blockTypeSettings.attributes = {
+		...blockTypeSettings.attributes,
+		[ META_ATTRIBUTE_NAME ]: {
+			type: 'object',
+		},
+	};
 
 	return blockTypeSettings;
 }
 
-export function addSaveProps( extraProps, blockType, attributes ) {
-	if ( hasBlockMetadataSupport( blockType ) ) {
-		extraProps[ META_ATTRIBUTE_NAME ] = attributes[ META_ATTRIBUTE_NAME ];
-	}
-
-	return extraProps;
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addMetaAttribute',
 	addMetaAttribute
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/metadata/save-props',
-	addSaveProps
-);
diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json
@@ -15,6 +15,7 @@
 	"supports": {
 		"customClassName": false,
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"renaming": false
 	}
 }
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -24,7 +24,6 @@
 		"__experimentalOnEnter": true,
 		"__experimentalOnMerge": true,
 		"__experimentalSettings": true,
-		"__experimentalMetadata": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
 		"ariaLabel": true,

diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js
@@ -29,10 +29,12 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const { content, level } = attributes;
 
+		const customName = attributes?.metadata?.name;
+
 		// In the list view, use the block's content as the label.
 		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && content ) {
-			return content;
+		if ( context === 'list-view' && ( customName || content ) ) {
+			return attributes?.metadata?.name || content;
 		}
 
 		if ( context === 'accessibility' ) {

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -133,7 +133,8 @@
 				}
 			}
 		},
-		"interactivity": true
+		"interactivity": true,
+		"renaming": false
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",

diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
@@ -28,7 +28,17 @@ export const settings = {
 		},
 	},
 	__experimentalLabel( attributes, { context } ) {
+		const customName = attributes?.metadata?.name;
+
+		if ( context === 'list-view' && customName ) {
+			return customName;
+		}
+
 		if ( context === 'accessibility' ) {
+			if ( customName ) {
+				return customName;
+			}
+
 			const { content } = attributes;
 			return ! content || content.length === 0 ? __( 'Empty' ) : content;
 		}

diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json
@@ -7,7 +7,8 @@
 	"description": "Show a block pattern.",
 	"supports": {
 		"html": false,
-		"inserter": false
+		"inserter": false,
+		"renaming": false
 	},
 	"textdomain": "default",
 	"attributes": {

diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json
@@ -23,7 +23,8 @@
 	"supports": {
 		"align": true,
 		"html": false,
-		"reusable": false
+		"reusable": false,
+		"renaming": false
 	},
 	"editorStyle": "wp-block-template-part-editor"
 }
diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js
@@ -145,6 +145,27 @@ test.describe( 'Block Renaming', () => {
 				},
 			] );
 		} );
+
+		test( 'does not allow renaming of blocks that do not support renaming', async ( {
+			// use `core/template-part` as the block
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/navigation',
+			} );
+
+			// Opens the block options menu and check there is not a `Rename` option
+			await editor.clickBlockToolbarButton( 'Options' );
+			//
+
+			const renameMenuItem = page.getByRole( 'menuitem', {
+				name: 'Rename',
+			} );
+
+			// TODO: assert that the locator didn't find a DOM node at all.
+			await expect( renameMenuItem ).toBeHidden();
+		} );
 	} );
 
 	test.describe( 'Block inspector renaming', () => {
@@ -219,5 +240,41 @@ test.describe( 'Block Renaming', () => {
 				},
 			] );
 		} );
+
+		test( 'does not allow renaming of blocks that do not support renaming', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/navigation',
+			} );
+
+			await editor.openDocumentSettingsSidebar();
+
+			const settingsTab = page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByRole( 'tab', { name: 'Settings' } );
+
+			await settingsTab.click();
+
+			const advancedPanelToggle = page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByRole( 'button', {
+					name: 'Advanced',
+					expanded: false,
+				} );
+
+			await advancedPanelToggle.click();
+
+			const nameInput = page.getByRole( 'textbox', {
+				name: 'Block name',
+			} );
+
+			await expect( nameInput ).toBeHidden();
+		} );
 	} );
 } );