From 13fabdfe67ffb7a8b762f47848511cef695d331a Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Wed, 15 Jan 2025 19:14:08 +0400
Subject: [PATCH] Paragraph: Use CSS to hide placeholders in Zoom out mode

---
 packages/block-library/src/paragraph/edit.js  | 21 +++----------------
 .../block-library/src/paragraph/editor.scss   |  7 +++++++
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index f1c2e15537b99..9e625a8bdd004 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -20,16 +20,13 @@ 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 (
@@ -111,11 +108,7 @@ function ParagraphBlock( {
 	isSelected: isSingleSelected,
 	name,
 } ) {
-	const isZoomOut = useSelect( ( select ) =>
-		unlock( select( blockEditorStore ) ).isZoomOut()
-	);
-
-	const { align, content, direction, dropCap } = attributes;
+	const { align, content, direction, dropCap, placeholder } = attributes;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {
@@ -125,12 +118,6 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 	const blockEditingMode = useBlockEditingMode();
-	let { placeholder } = attributes;
-	if ( isZoomOut ) {
-		placeholder = '';
-	} else if ( ! placeholder ) {
-		placeholder = __( 'Type / to choose a block' );
-	}
 
 	return (
 		<>
@@ -182,10 +169,8 @@ function ParagraphBlock( {
 						: __( 'Block: Paragraph' )
 				}
 				data-empty={ RichText.isEmpty( content ) }
-				placeholder={ placeholder }
-				data-custom-placeholder={
-					placeholder && ! isZoomOut ? true : undefined
-				}
+				placeholder={ placeholder || __( 'Type / to choose a block' ) }
+				data-custom-placeholder={ placeholder ? true : undefined }
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
 			/>
diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
index 369cc5cb1d63a..ad4043bee610a 100644
--- a/packages/block-library/src/paragraph/editor.scss
+++ b/packages/block-library/src/paragraph/editor.scss
@@ -22,3 +22,10 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
 	rotate: 180deg;
 }
+
+// Hide the placeholder when the editor is in zoomed out mode.
+.is-zoomed-out .block-editor-block-list__block[data-empty="true"] {
+	[data-rich-text-placeholder] {
+		opacity: 0;
+	}
+}