Enable Block Renaming support for (almost) all blocks

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

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' );

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' );

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 (
  <>

packages/block-editor/src/hooks/metadata-name.js → packages/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.

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';

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
-);

packages/block-library/src/block/block.json

@@ -15,6 +15,7 @@
  "supports": {
  "customClassName": false,
  "html": false,
- "inserter": false
+ "inserter": false,
+ "renaming": false
  }
 }

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,

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' ) {

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",

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;
  }

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": {

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"
 }

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();
+ } );
  } );
 } );