From 6cbb0a7b709a99bb255644889e8daf3c8ecd5737 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Fri, 20 Dec 2024 16:47:03 +0200
Subject: [PATCH] Remove placeholder of default paragraph when it's the only
 block and canvas is zoomed out (#68106)

* remove the placeholder text of and disable the default paragraph block, in zoom out mode

* leave the block enabled

* update the custom placeholder data attribute


Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
---
 packages/block-library/src/paragraph/edit.js | 22 ++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 02ca1feceae555..f1c2e15537b99b 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -20,14 +20,16 @@ import {
 	useBlockProps,
 	useSettings,
 	useBlockEditingMode,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
+import { unlock } from '../lock-unlock';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
@@ -109,7 +111,11 @@ function ParagraphBlock( {
 	isSelected: isSingleSelected,
 	name,
 } ) {
-	const { align, content, direction, dropCap, placeholder } = attributes;
+	const isZoomOut = useSelect( ( select ) =>
+		unlock( select( blockEditorStore ) ).isZoomOut()
+	);
+
+	const { align, content, direction, dropCap } = attributes;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {
@@ -119,6 +125,12 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	let { placeholder } = attributes;
+	if ( isZoomOut ) {
+		placeholder = '';
+	} else if ( ! placeholder ) {
+		placeholder = __( 'Type / to choose a block' );
+	}
 
 	return (
 		<>
@@ -170,8 +182,10 @@ function ParagraphBlock( {
 						: __( 'Block: Paragraph' )
 				}
 				data-empty={ RichText.isEmpty( content ) }
-				placeholder={ placeholder || __( 'Type / to choose a block' ) }
-				data-custom-placeholder={ placeholder ? true : undefined }
+				placeholder={ placeholder }
+				data-custom-placeholder={
+					placeholder && ! isZoomOut ? true : undefined
+				}
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
 			/>