Add perf opt

WordPress · getdave · Aug 8, 2025 · Aug 5, 2025 · Aug 5, 2025 · Aug 6, 2025
commit f68df21bb592d32996f93b22a2d7228a4819311e
diff --git a/packages/block-editor/src/components/rich-text/with-write-mode-filter.js b/packages/block-editor/src/components/rich-text/with-write-mode-filter.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { memo, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,22 +18,39 @@ import { useBlockEditingMode } from '../block-editing-mode';
  * @return {Function} The wrapped component
  */
 const withWriteModeFilter = ( WrappedComponent, formatSettings ) => {
-	return ( props ) => {
+	// Early return if format is essential - no filtering needed
+	if ( formatSettings?.essential ) {
+		return WrappedComponent;
+	}
+
+	// Memoize the wrapped component to prevent unnecessary re-renders
+	const FilteredComponent = memo( ( props ) => {
 		const blockEditingMode = useBlockEditingMode();
 		const isNavigationMode = useSelect(
 			( select ) => select( blockEditorStore ).isNavigationMode(),
 			[]
 		);
-		const isContentOnlyMode = blockEditingMode === 'contentOnly';
-		const isWriteMode = isNavigationMode && isContentOnlyMode;
+
+		// Memoize the write mode calculation
+		const isWriteMode = useMemo( () => {
+			const isContentOnlyMode = blockEditingMode === 'contentOnly';
+			return isNavigationMode && isContentOnlyMode;
+		}, [ isNavigationMode, blockEditingMode ] );
 
 		// In write mode, only show essential formats
-		if ( isWriteMode && ! formatSettings?.essential ) {
+		if ( isWriteMode ) {
 			return null;
 		}
 
 		return <WrappedComponent { ...props } />;
-	};
+	} );
+
+	// Set display name for debugging
+	FilteredComponent.displayName = `withWriteModeFilter(${
+		WrappedComponent.displayName || WrappedComponent.name || 'Component'
+	})`;
+
+	return FilteredComponent;
 };
 
 export default withWriteModeFilter;