rollback useBlockProp and paragraph edit changes

WordPress · Jun 8, 2021 · 9066a9b · 9066a9b
1 parent 141f411
commit 9066a9b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 54 deletions.
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
@@ -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
@@ -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 (
 		<>
 			<BlockControls group="block">
-				<AlignmentControl value={ align } onChange={ updateAlign } />
+				<AlignmentControl
+					value={ align }
+					onChange={ ( newAlign ) =>
+						setAttributes( { align: newAlign } )
+					}
+				/>
 				<ParagraphRTLControl
 					direction={ direction }
-					setDirection={ setDirection }
+					setDirection={ ( newDirection ) =>
+						setAttributes( { direction: newDirection } )
+					}
 				/>
 			</BlockControls>
 			{ isDropCapFeatureEnabled && (
@@ -121,7 +86,9 @@ function ParagraphBlock( {
 						<ToggleControl
 							label={ __( 'Drop cap' ) }
 							checked={ !! dropCap }
-							onChange={ setDropCap }
+							onChange={ () =>
+								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 }