From bd9410e3152cf9dbe6bd8f0a90ec22a508dd6c2e Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 18 Dec 2024 18:43:42 +0200 Subject: [PATCH 1/3] remove the placeholder text of and disable the default paragraph block, in zoom out mode --- packages/block-editor/src/store/reducer.js | 11 +++++++++++ packages/block-library/src/paragraph/edit.js | 18 +++++++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index edae9c392c37d..572fbdce21684 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -21,6 +21,7 @@ import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults'; import { insertAt, moveTo } from './array'; import { sectionRootClientIdKey } from './private-keys'; import { unlock } from '../lock-unlock'; +import { getBlockName } from './selectors'; const { isContentBlock } = unlock( blocksPrivateApis ); @@ -2268,6 +2269,16 @@ function getDerivedBlockEditingModesForTree( traverseBlockTree( state, treeClientId, ( block ) => { const { clientId, name: blockName } = block; if ( isZoomedOut || isNavMode ) { + if ( + isZoomedOut && + state.blocks.order.length === 1 && + getBlockName( state.blocks.order[ 0 ] ) === 'core/paragraph' && + state.blocks.order[ 0 ] === clientId + ) { + derivedBlockEditingModes.set( clientId, 'disabled' ); + return; + } + // If the root block is the section root set its editing mode to contentOnly. if ( clientId === sectionRootClientId ) { derivedBlockEditingModes.set( clientId, 'contentOnly' ); diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 02ca1feceae55..53912a54757df 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,7 +182,7 @@ function ParagraphBlock( { : __( 'Block: Paragraph' ) } data-empty={ RichText.isEmpty( content ) } - placeholder={ placeholder || __( 'Type / to choose a block' ) } + placeholder={ placeholder } data-custom-placeholder={ placeholder ? true : undefined } __unstableEmbedURLOnPaste __unstableAllowPrefixTransformations From 80dfbfbfb3e81934de7a07514d176478c0605d27 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 18 Dec 2024 19:25:07 +0200 Subject: [PATCH 2/3] leave the block enabled --- packages/block-editor/src/store/reducer.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 572fbdce21684..edae9c392c37d 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -21,7 +21,6 @@ import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults'; import { insertAt, moveTo } from './array'; import { sectionRootClientIdKey } from './private-keys'; import { unlock } from '../lock-unlock'; -import { getBlockName } from './selectors'; const { isContentBlock } = unlock( blocksPrivateApis ); @@ -2269,16 +2268,6 @@ function getDerivedBlockEditingModesForTree( traverseBlockTree( state, treeClientId, ( block ) => { const { clientId, name: blockName } = block; if ( isZoomedOut || isNavMode ) { - if ( - isZoomedOut && - state.blocks.order.length === 1 && - getBlockName( state.blocks.order[ 0 ] ) === 'core/paragraph' && - state.blocks.order[ 0 ] === clientId - ) { - derivedBlockEditingModes.set( clientId, 'disabled' ); - return; - } - // If the root block is the section root set its editing mode to contentOnly. if ( clientId === sectionRootClientId ) { derivedBlockEditingModes.set( clientId, 'contentOnly' ); From 608769643c1c75f4c4338ae20a962745bc9badda Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 19 Dec 2024 15:52:25 +0200 Subject: [PATCH 3/3] update the custom placeholder data attribute --- packages/block-library/src/paragraph/edit.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 53912a54757df..f1c2e15537b99 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -183,7 +183,9 @@ function ParagraphBlock( { } data-empty={ RichText.isEmpty( content ) } placeholder={ placeholder } - data-custom-placeholder={ placeholder ? true : undefined } + data-custom-placeholder={ + placeholder && ! isZoomOut ? true : undefined + } __unstableEmbedURLOnPaste __unstableAllowPrefixTransformations />