Block Editor: Optimize 'anchor' inspector controls (#55721)

* Block Editor: Optimize 'anchor' inspector controls * Lazy evaluate block support
WordPress · Nov 1, 2023 · 16367dc · 16367dc
1 parent 9d6709a
commit 16367dc
Showing 1 changed file with 75 additions and 65 deletions.
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
@@ -52,6 +52,69 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+
+	const isWeb = Platform.OS === 'web';
+	const textControl = (
+		<TextControl
+			__nextHasNoMarginBottom
+			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={ attributes.anchor || '' }
+			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+			onChange={ ( nextValue ) => {
+				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+				setAttributes( {
+					anchor: nextValue,
+				} );
+			} }
+			autoCapitalize="none"
+			autoComplete="off"
+		/>
+	);
+
+	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>
+			) }
+		</>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning the anchor ID, if block supports anchor.
@@ -63,72 +126,19 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
-			const hasAnchor = hasBlockSupport( props.name, 'anchor' );
-			const blockEditingMode = useBlockEditingMode();
-
-			if ( hasAnchor && props.isSelected ) {
-				const isWeb = Platform.OS === 'web';
-				const textControl = (
-					<TextControl
-						__nextHasNoMarginBottom
-						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={ props.attributes.anchor || '' }
-						placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
-						onChange={ ( nextValue ) => {
-							nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
-							props.setAttributes( {
-								anchor: nextValue,
-							} );
-						} }
-						autoCapitalize="none"
-						autoComplete="off"
-					/>
-				);
-
-				return (
-					<>
-						<BlockEdit { ...props } />
-						{ isWeb && blockEditingMode === 'default' && (
-							<InspectorControls group="advanced">
-								{ textControl }
-							</InspectorControls>
+			return (
+				<>
+					<BlockEdit { ...props } />
+					{ props.isSelected &&
+						hasBlockSupport( props.name, 'anchor' ) && (
+							<BlockEditAnchorControl
+								blockName={ props.name }
+								attributes={ props.attributes }
+								setAttributes={ props.setAttributes }
+							/>
 						) }
-						{ /*
-						 * 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 && props.name === 'core/heading' && (
-							<InspectorControls>
-								<PanelBody title={ __( 'Heading settings' ) }>
-									{ textControl }
-								</PanelBody>
-							</InspectorControls>
-						) }
-					</>
-				);
-			}
-
-			return <BlockEdit { ...props } />;
+				</>
+			);
 		};
 	},
 	'withInspectorControl'