feat: Enable setting HTML anchor IDs for all supported block types

packages/block-editor/src/components/block-settings/container.native.js

@@ -16,6 +16,7 @@ import styles from './container.native.scss';
 import InspectorControls from '../inspector-controls';
 import ImageLinkDestinationsScreen from '../image-link-destinations';
 import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients';
+import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 
 export const blockSettingsScreens = {
 	settings: 'Settings',
@@ -46,7 +47,10 @@ export default function BottomSheetSettings( props ) {
 				<BottomSheet.NavigationScreen
 					name={ blockSettingsScreens.settings }
 				>
-					<InspectorControls.Slot />
+					<>
+						<InspectorControls.Slot />
+						<AdvancedControls />
+					</>
 				</BottomSheet.NavigationScreen>
 				<BottomSheet.NavigationScreen
 					name={ BottomSheet.SubSheet.screenName }

packages/block-editor/src/components/block-toolbar/test/index.native.js

@@ -15,13 +15,7 @@ describe( 'Block Toolbar', () => {
 	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
 		// Arrange
 		const screen = await initializeEditor();
-		await addBlock( screen, 'Image' );
-
-		// Act
-		fireEvent(
-			screen.getByTestId( 'media-options-picker' ),
-			'backdropPress'
-		);
+		await addBlock( screen, 'Shortcode' );
 
 		// Assert
 		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();

packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.native.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import groups from '../inspector-controls/groups';
+
+export default function AdvancedControls( props ) {
+	const Slot = groups.advanced?.Slot;
+	if ( ! Slot ) {
+		return null;
+	}
+
+	return (
+		<Slot { ...props }>
+			{ ( fills ) => {
+				if ( ! fills.length ) {
+					return null;
+				}
+
+				return (
+					<PanelBody title={ __( 'Advanced' ) }>{ fills }</PanelBody>
+				);
+			} }
+		</Slot>
+	);
+}

packages/block-editor/src/hooks/anchor.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
+import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
@@ -51,71 +51,51 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAnchorControlPure( {
-	name: blockName,
-	anchor,
-	setAttributes,
-} ) {
+function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 
-	const isWeb = Platform.OS === 'web';
-	const textControl = (
-		<TextControl
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-			className="html-anchor-control"
-			label={ __( 'HTML anchor' ) }
-			help={
-				<>
-					{ __(
-						'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
-					) }
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 
-					{ isWeb && (
-						<ExternalLink
-							href={ __(
-								'https://wordpress.org/documentation/article/page-jumps/'
-							) }
-						>
-							{ __( 'Learn more about anchors' ) }
-						</ExternalLink>
-					) }
-				</>
-			}
-			value={ anchor || '' }
-			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
-			onChange={ ( nextValue ) => {
-				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
-				setAttributes( {
-					anchor: nextValue,
-				} );
-			} }
-			autoCapitalize="none"
-			autoComplete="off"
-		/>
-	);
+	const isWeb = Platform.OS === 'web';
 
 	return (
-		<>
-			{ isWeb && blockEditingMode === 'default' && (
-				<InspectorControls group="advanced">
-					{ textControl }
-				</InspectorControls>
-			) }
-			{ /*
-			 * We plan to remove scoping anchors to 'core/heading' to support
-			 * anchors for all eligble blocks. Additionally we plan to explore
-			 * leveraging InspectorAdvancedControls instead of a custom
-			 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
-			 */ }
-			{ ! isWeb && blockName === 'core/heading' && (
-				<InspectorControls>
-					<PanelBody title={ __( 'Heading settings' ) }>
-						{ textControl }
-					</PanelBody>
-				</InspectorControls>
-			) }
-		</>
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				className="html-anchor-control"
+				label={ __( 'HTML anchor' ) }
+				help={
+					<>
+						{ __(
+							'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+						) }
+
+						{ isWeb && (
+							<ExternalLink
+								href={ __(
+									'https://wordpress.org/documentation/article/page-jumps/'
+								) }
+							>
+								{ __( 'Learn more about anchors' ) }
+							</ExternalLink>
+						) }
+					</>
+				}
+				value={ anchor || '' }
+				placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+				onChange={ ( nextValue ) => {
+					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+					setAttributes( {
+						anchor: nextValue,
+					} );
+				} }
+				autoCapitalize="none"
+				autoComplete="off"
+			/>
+		</InspectorControls>
 	);
 }
 

packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`anchor should set the ID attribute on the block 1`] = `
+"<!-- wp:paragraph -->
+<p id="my-anchor"></p>
+<!-- /wp:paragraph -->"
+`;

packages/block-editor/src/hooks/test/anchor.native.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	changeTextOfTextInput,
+	getEditorHtml,
+	initializeEditor,
+	openBlockSettings,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/paragraph' ] );
+
+describe( 'anchor', () => {
+	it( 'should set the ID attribute on the block', async () => {
+		// Arrange
+		await initializeEditor();
+		const block = await addBlock( screen, 'Paragraph' );
+		await openBlockSettings( screen, block );
+
+		// Act
+		await changeTextOfTextInput(
+			await screen.getByPlaceholderText( 'Add an anchor' ),
+			'my-anchor'
+		);
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

packages/react-native-editor/CHANGELOG.md

@@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] [internal] Upgrade React Native to version 0.73.3 [#58475]
 -   [**] Add error boundary components and exception logging [#59221]
 -   [**] Fix crash occurring when the URL associated with a Video block is changed too quickly [#59841]
+-   [**] Enable setting HTML anchor IDs for all supported block types [#59802]
 
 ## 1.114.1
 -   [**] Fix a crash produced when the content of a synced pattern is updated [#59632]