Refactor Write Mode format filtering to use useFormatTypes hook

- Remove withWriteModeFilter HOC approach in favor of centralized filtering - Add Write Mode detection to RichText component with experiment flag check - Enhance useFormatTypes hook with disableNoneEssentialFormatting parameter - Centralize all format filtering logic in one place for better performance - Eliminate individual store subscriptions per format component - Maintain same functionality with improved architecture and performance
WordPress · getdave · Aug 8, 2025 · Aug 5, 2025 · Aug 5, 2025 · Aug 6, 2025
commit 6fc6b0a9153825091b3b519ccd0580ff191e1ec7
diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js
@@ -8,7 +8,6 @@ import { useContext, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockContext from '../block-context';
-import withWriteModeFilter from './with-write-mode-filter';
 
 const DEFAULT_BLOCK_CONTEXT = {};
 
@@ -38,17 +37,14 @@ function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
 		return null;
 	}
 
-	// Apply the write mode filter HOC
-	const FilteredEditFunction = withWriteModeFilter( EditFunction, settings );
-
 	const activeFormat = getActiveFormat( value, name );
 	const isActive = activeFormat !== undefined;
 	const activeObject = getActiveObject( value );
 	const isObjectActive =
 		activeObject !== undefined && activeObject.type === name;
 
 	return (
-		<FilteredEditFunction
+		<EditFunction
 			key={ name }
 			isActive={ isActive }
 			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }

@@ -132,8 +132,12 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd } =
-			select( blockEditorStore );
+		const {
+			getSelectionStart,
+			getSelectionEnd,
+			getBlockEditingMode,
+			isNavigationMode,
+		} = select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
 
@@ -154,15 +158,22 @@ export function RichTextWrapper(
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
+			isWriteMode:
+				window?.__experimentalEditorWriteMode &&
+				isNavigationMode() &&
+				getBlockEditingMode( clientId ) === 'contentOnly',
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
-		clientId,
-		identifier,
-		instanceId,
-		originalIsSelected,
-		isBlockSelected,
-	] );
+	const { selectionStart, selectionEnd, isSelected, isWriteMode } = useSelect(
+		selector,
+		[
+			clientId,
+			identifier,
+			instanceId,
+			originalIsSelected,
+			isBlockSelected,
+		]
+	);
 
 	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
@@ -323,8 +334,9 @@ export function RichTextWrapper(
 	} = useFormatTypes( {
 		clientId,
 		identifier,
-		withoutInteractiveFormatting,
 		allowedFormats: adjustedAllowedFormats,
+		withoutInteractiveFormatting,
+		disableNoneEssentialFormatting: isWriteMode,
 	} );
 
 	function addEditorOnlyFormats( value ) {

@@ -56,35 +56,48 @@ function getPrefixedSelectKeys( selected, prefix ) {
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
  *
- * @param {Object}  $0                              Options
- * @param {string}  $0.clientId                     Block client ID.
- * @param {string}  $0.identifier                   Block attribute.
- * @param {boolean} $0.withoutInteractiveFormatting Whether to clean the interactive formatting or not.
- * @param {Array}   $0.allowedFormats               Allowed formats
+ * @param {Object}  options                                Options
+ * @param {string}  options.clientId                       Block client ID.
+ * @param {string}  options.identifier                     Block attribute.
+ * @param {Array}   options.allowedFormats                 Allowed formats
+ * @param {boolean} options.withoutInteractiveFormatting   Whether to clean the interactive formatting or not.
+ * @param {boolean} options.disableNoneEssentialFormatting Whether to disable none-essential formatting or not.
  */
 export function useFormatTypes( {
 	clientId,
 	identifier,
-	withoutInteractiveFormatting,
 	allowedFormats,
+	withoutInteractiveFormatting,
+	disableNoneEssentialFormatting = false,
 } ) {
 	const allFormatTypes = useSelect( formatTypesSelector, [] );
 	const formatTypes = useMemo( () => {
-		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
-			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
-				return false;
-			}
+		return allFormatTypes.filter(
+			( { name, interactive, tagName, __unstableEssential } ) => {
+				if ( allowedFormats && ! allowedFormats.includes( name ) ) {
+					return false;
+				}
 
-			if (
-				withoutInteractiveFormatting &&
-				( interactive || interactiveContentTags.has( tagName ) )
-			) {
-				return false;
-			}
+				if ( disableNoneEssentialFormatting && ! __unstableEssential ) {
+					return false;
+				}
+
+				if (
+					withoutInteractiveFormatting &&
+					( interactive || interactiveContentTags.has( tagName ) )
+				) {
+					return false;
+				}
 
-			return true;
-		} );
-	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
+				return true;
+			}
+		);
+	}, [
+		allFormatTypes,
+		allowedFormats,
+		disableNoneEssentialFormatting,
+		withoutInteractiveFormatting,
+	] );
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {

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