Restrict formatting controls in write mode (contentOnly)

- Add useBlockEditingMode() hook to detect write mode - In contentOnly mode, only show bold and italic controls - Remove link and unknown formats from write mode toolbar - Hide 'More' dropdown with additional formatting options in write mode - Keep write mode simple and focused on essential content editing
WordPress · getdave · Aug 8, 2025 · Aug 5, 2025 · Aug 5, 2025 · Aug 6, 2025
commit 31e093d2ff9736269f4916a666755adc3c1106c2
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -14,59 +14,74 @@ import { chevronDown } from '@wordpress/icons';
  * Internal dependencies
  */
 import { orderBy } from '../../../utils/sorting';
+import { useBlockEditingMode } from '../../block-editing-mode';
 
 const POPOVER_PROPS = {
 	placement: 'bottom-start',
 };
 
 const FormatToolbar = () => {
+	const blockEditingMode = useBlockEditingMode();
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
+
+	// In contentOnly mode, only show essential formatting controls
+	const primaryFormats = isContentOnlyMode
+		? [ 'bold', 'italic', 'link' ]
+		: [ 'bold', 'italic', 'link', 'unknown' ];
+
 	return (
 		<>
-			{ [ 'bold', 'italic', 'link', 'unknown' ].map( ( format ) => (
+			{ primaryFormats.map( ( format ) => (
 				<Slot
 					name={ `RichText.ToolbarControls.${ format }` }
 					key={ format }
 				/>
 			) ) }
-			<Slot name="RichText.ToolbarControls">
-				{ ( fills ) => {
-					if ( ! fills.length ) {
-						return null;
-					}
+			{ ! isContentOnlyMode && (
+				<Slot name="RichText.ToolbarControls">
+					{ ( fills ) => {
+						if ( ! fills.length ) {
+							return null;
+						}
 
-					const allProps = fills.map( ( [ { props } ] ) => props );
-					const hasActive = allProps.some(
-						( { isActive } ) => isActive
-					);
+						const allProps = fills.map(
+							( [ { props } ] ) => props
+						);
+						const hasActive = allProps.some(
+							( { isActive } ) => isActive
+						);
 
-					return (
-						<ToolbarItem>
-							{ ( toggleProps ) => (
-								<DropdownMenu
-									icon={ chevronDown }
-									/* translators: button label text should, if possible, be under 16 characters. */
-									label={ __( 'More' ) }
-									toggleProps={ {
-										...toggleProps,
-										className: clsx(
-											toggleProps.className,
-											{ 'is-pressed': hasActive }
-										),
-										description: __(
-											'Displays more block tools'
-										),
-									} }
-									controls={ orderBy(
-										fills.map( ( [ { props } ] ) => props ),
-										'title'
-									) }
-									popoverProps={ POPOVER_PROPS }
-								/>
-							) }
-						</ToolbarItem>
-					);
-				} }
-			</Slot>
+						return (
+							<ToolbarItem>
+								{ ( toggleProps ) => (
+									<DropdownMenu
+										icon={ chevronDown }
+										/* translators: button label text should, if possible, be under 16 characters. */
+										label={ __( 'More' ) }
+										toggleProps={ {
+											...toggleProps,
+											className: clsx(
+												toggleProps.className,
+												{ 'is-pressed': hasActive }
+											),
+											description: __(
+												'Displays more block tools'
+											),
+										} }
+										controls={ orderBy(
+											fills.map(
+												( [ { props } ] ) => props
+											),
+											'title'
+										) }
+										popoverProps={ POPOVER_PROPS }
+									/>
+								) }
+							</ToolbarItem>
+						);
+					} }
+				</Slot>
+			) }
 		</>
 	);
 };