Zoom out: Add an Editor setting to disable Zoom out mode

packages/block-editor/README.md

@@ -824,6 +824,7 @@ _Properties_
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
+-   _zoomOutEnabled_ `boolean`: Whether the zoom out feature is enabled or not.
 
 ### SkipToSelectedBlock
 

packages/block-editor/src/components/inserter/menu.js

@@ -54,14 +54,18 @@ function InserterMenu(
 	},
 	ref
 ) {
-	const { isZoomOutMode, hasSectionRootClientId } = useSelect( ( select ) => {
-		const { isZoomOut, getSectionRootClientId } = unlock(
+	const {
+		isZoomOutMode,
+		zoomOutEditorSettingEnabled,
+		hasSectionRootClientId,
+	} = useSelect( ( select ) => {
+		const { isZoomOut, getSectionRootClientId, getSettings } = unlock(
 			select( blockEditorStore )
 		);
-
 		return {
 			isZoomOutMode: isZoomOut(),
 			hasSectionRootClientId: !! getSectionRootClientId(),
+			zoomOutEditorSettingEnabled: getSettings().zoomOutEnabled,
 		};
 	}, [] );
 
@@ -90,6 +94,7 @@ function InserterMenu(
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 
 	const shouldUseZoomOut =
+		zoomOutEditorSettingEnabled &&
 		hasSectionRootClientId &&
 		( selectedTab === 'patterns' || selectedTab === 'media' );
 

packages/block-editor/src/store/defaults.js

@@ -33,6 +33,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
+ * @property {boolean}       zoomOutEnabled                         Whether the zoom out feature is enabled or not.
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,

packages/editor/src/components/header/index.js

@@ -91,7 +91,13 @@ function Header( {
 		};
 	}, [] );
 
+	const zoomOutEditorSettingEnabled = useSelect(
+		( select ) => select( editorStore ).getEditorSettings().zoomOutEnabled,
+		[]
+	);
+
 	const canBeZoomedOut =
+		zoomOutEditorSettingEnabled &&
 		[ 'post', 'page', 'wp_template' ].includes( postType ) &&
 		hasSectionRootClientId;
 

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -86,6 +86,7 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__unstableHasCustomAppender',
 	'__unstableResolvedAssets',
 	'__unstableIsBlockBasedTheme',
+	'zoomOutEnabled',
 ];
 
 const {

packages/editor/src/store/defaults.js

@@ -21,6 +21,7 @@ import { SETTINGS_DEFAULTS } from '@wordpress/block-editor';
  * @property {Array?}        allowedMimeTypes      List of allowed mime types and file extensions
  * @property {number}        maxUploadFileSize     Maximum upload file size
  * @property {boolean}       supportsLayout        Whether the editor supports layouts.
+ * @property {boolean}       zoomOutEnabled        Whether the zoom out feature is enabled or not.
  */
 export const EDITOR_SETTINGS_DEFAULTS = {
 	...SETTINGS_DEFAULTS,
@@ -30,4 +31,5 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 	fontLibraryEnabled: true,
 	enableCustomFields: undefined,
 	defaultRenderingMode: 'post-only',
+	zoomOutEnabled: true,
 };