Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove placeholder of default paragraph when it's the only block and canvas is zoomed out #68106

Merged
merged 3 commits into from
Dec 20, 2024
Merged

Remove placeholder of default paragraph when it's the only block and canvas is zoomed out #68106

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bd9410e
remove the placeholder text of and disable the default paragraph bloc…
draganescu Dec 18, 2024
80dfbfb
leave the block enabled
draganescu Dec 18, 2024
6087696
update the custom placeholder data attribute
draganescu Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions packages/block-library/src/paragraph/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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( {
Expand All @@ -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 (
<>
Expand Down Expand Up @@ -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
/>
Expand Down
Loading