diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 2f0173d6c29941..b7449439e72348 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useContext, useMemo } from '@wordpress/element'; +import { useContext } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { __unstableGetBlockProps as getBlockProps, @@ -128,11 +128,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { } ), ] ); - const updatedStyle = { ...wrapperProps.style, ...props.style }; - const style = useMemo( () => updatedStyle, [ - JSON.stringify( updatedStyle ), - ] ); - return { ...wrapperProps, ...props, @@ -157,7 +152,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { useBlockCustomClassName( clientId ), useBlockMovingModeClassNames( clientId ) ), - style, + style: { ...wrapperProps.style, ...props.style }, }; } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 804e9af1d5a686..e88bfc3c721179 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -22,7 +22,6 @@ import { } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { formatLtr } from '@wordpress/icons'; -import { useCallback } from '@wordpress/element'; const name = 'core/paragraph'; @@ -65,54 +64,20 @@ function ParagraphBlock( { style: { direction }, } ); - const updateContent = useCallback( - ( newContent ) => setAttributes( { content: newContent } ), - [ setAttributes ] - ); - - const splitParagraph = useCallback( - ( value, isOriginal ) => { - let newAttributes; - - if ( isOriginal || value ) { - newAttributes = { - ...attributes, - content: value, - }; - } - - const block = createBlock( name, newAttributes ); - - if ( isOriginal ) { - block.clientId = clientId; - } - - return block; - }, - [ attributes, createBlock ] - ); - - const updateAlign = useCallback( ( newAlign ) => - setAttributes( { align: newAlign }, [ setAttributes ] ) - ); - - const setDirection = useCallback( - ( newDirection ) => setAttributes( { direction: newDirection } ), - [] - ); - - const setDropCap = useCallback( - () => setAttributes( { dropCap: ! dropCap } ), - [ setAttributes ] - ); - return ( <> - + + setAttributes( { align: newAlign } ) + } + /> + setAttributes( { direction: newDirection } ) + } /> { isDropCapFeatureEnabled && ( @@ -121,7 +86,9 @@ function ParagraphBlock( { + setAttributes( { dropCap: ! dropCap } ) + } help={ dropCap ? __( 'Showing large initial letter.' ) @@ -138,8 +105,27 @@ function ParagraphBlock( { tagName="p" { ...blockProps } value={ content } - onChange={ updateContent } - onSplit={ splitParagraph } + onChange={ ( newContent ) => + setAttributes( { content: newContent } ) + } + onSplit={ ( value, isOriginal ) => { + let newAttributes; + + if ( isOriginal || value ) { + newAttributes = { + ...attributes, + content: value, + }; + } + + const block = createBlock( name, newAttributes ); + + if ( isOriginal ) { + block.clientId = clientId; + } + + return block; + } } onMerge={ mergeBlocks } onReplace={ onReplace } onRemove={ onRemove }