Props in, props out

WordPress · Jun 9, 2020 · c307d41 · c307d41
1 parent 974e776
commit c307d41
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 34 deletions.
diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -22,7 +22,23 @@ import { Context, SetBlockNodes } from './root-container';
 import { BlockListBlockContext } from './block';
 import ELEMENTS from './block-wrapper-elements';
 
-export function useBlock( ref, { __unstableIsHtml } = {} ) {
+/**
+ * This hook is used to lighly mark an element as a block element. Call this
+ * hook and pass the returned props to the element to mark as a block. If you
+ * define a ref for the element, it is important to pass the ref to this hook,
+ * which the hooks in turn will pass to the component through the props it
+ * returns. Optionally, you can also pass any other props through this hook, and
+ * they will be merged and returned.
+ *
+ * @param {Object} props   Optional. Props to pass to the element. Must contain
+ *                         the ref if one is defined.
+ * @param {Object} options Options for internal use only.
+ *
+ * @return {Object} Props to pass to the element to mark as a block.
+ */
+export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
+	const fallbackRef = useRef();
+	const ref = props.ref || fallbackRef;
 	const onSelectionStart = useContext( Context );
 	const setBlockNodes = useContext( SetBlockNodes );
 	const {
@@ -208,14 +224,22 @@ export function useBlock( ref, { __unstableIsHtml } = {} ) {
 
 	return {
 		...wrapperProps,
+		...props,
+		ref,
 		id: `block-${ clientId }${ htmlSuffix }`,
 		tabIndex: 0,
 		role: 'group',
 		'aria-label': blockLabel,
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
-		className: classnames( 'wp-block', className, wrapperProps.className ),
+		className: classnames(
+			'wp-block',
+			className,
+			props.className,
+			wrapperProps.className
+		),
+		style: { ...wrapperProps.style, ...props.style },
 	};
 }
 
@@ -224,9 +248,10 @@ const BlockComponent = forwardRef(
 		{ children, tagName: TagName = 'div', __unstableIsHtml, ...props },
 		wrapper
 	) => {
-		const fallbackRef = useRef();
-		wrapper = wrapper || fallbackRef;
-		const wrapperProps = useBlock( wrapper, { __unstableIsHtml } );
+		const wrapperProps = useBlockProps(
+			{ ref: wrapper },
+			{ __unstableIsHtml }
+		);
 		const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
 		const blockWrapper = (
 			<TagName
@@ -235,7 +260,6 @@ const BlockComponent = forwardRef(
 				role={ wrapperProps.role }
 				{ ...props }
 				{ ...omit( wrapperProps, [ 'data-align' ] ) }
-				ref={ wrapper }
 				className={ classnames(
 					props.className,
 					wrapperProps.className,

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -70,7 +70,7 @@ export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export {
 	Block as __experimentalBlock,
-	useBlock as __experimentalUseBlock,
+	useBlockProps as __experimentalUseBlockProps,
 } from './block-list/block-wrapper';
 export { default as BlockMover } from './block-mover';
 export { default as BlockPreview } from './block-preview';

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -29,7 +29,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	RichText,
-	__experimentalUseBlock as useBlock,
+	__experimentalUseBlockProps as useBlockProps,
 	__experimentalImageSizeControl as ImageSizeControl,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 } from '@wordpress/block-editor';
@@ -120,7 +120,7 @@ export function ImageEdit( {
 	onReplace,
 } ) {
 	const ref = useRef();
-	const blockProps = useBlock( ref );
+	const blockProps = useBlockProps( { ref } );
 	const { image, maxWidth, isRTL, imageSizes, mediaUpload } = useSelect(
 		( select ) => {
 			const { getMedia } = select( 'core' );

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -7,7 +7,7 @@ import {
 	RichText,
 	BlockControls,
 	RichTextShortcut,
-	__experimentalUseBlock as useBlock,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 import {
@@ -30,7 +30,6 @@ import {
 	formatOutdentRTL,
 } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,8 +44,6 @@ export default function ListEdit( {
 	onReplace,
 	isSelected,
 } ) {
-	const ref = useRef();
-	const blockProps = useBlock( ref );
 	const { ordered, values, type, reversed, start } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
 
@@ -181,8 +178,7 @@ export default function ListEdit( {
 				start={ start }
 				reversed={ reversed }
 				type={ type }
-				ref={ ref }
-				{ ...blockProps }
+				{ ...useBlockProps() }
 			>
 				{ controls }
 			</RichText>

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -13,13 +13,13 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	__experimentalUseBlock as useBlock,
+	__experimentalUseBlockProps as useBlockProps,
 	getFontSize,
 	__experimentalUseEditorFeature as useEditorFeature,
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { formatLtr } from '@wordpress/icons';
 
 /**
@@ -106,8 +106,6 @@ function ParagraphBlock( {
 		fontSize,
 		style,
 	} = attributes;
-	const ref = useRef();
-	const blockProps = useBlock( ref );
 	const [ isDropCapEnabled, dropCapMinimumHeight ] = useDropCap(
 		dropCap,
 		fontSize,
@@ -156,9 +154,15 @@ function ParagraphBlock( {
 				) }
 			</InspectorControls>
 			<RichText
-				ref={ ref }
 				identifier="content"
 				tagName="p"
+				{ ...useBlockProps( {
+					className: classnames( {
+						'has-drop-cap': dropCap,
+						[ `has-text-align-${ align }` ]: align,
+					} ),
+					style: styles,
+				} ) }
 				value={ content }
 				onChange={ ( newContent ) =>
 					setAttributes( { content: newContent } )
@@ -189,12 +193,6 @@ function ParagraphBlock( {
 				}
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
-				{ ...blockProps }
-				className={ classnames( blockProps.className, {
-					'has-drop-cap': dropCap,
-					[ `has-text-align-${ align }` ]: align,
-				} ) }
-				style={ { ...blockProps.style, ...styles } }
 			/>
 		</>
 	);

diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -11,11 +11,10 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 	RichText,
-	__experimentalUseBlock as useBlock,
+	__experimentalUseBlockProps as useBlockProps,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
 
 export default function QuoteEdit( {
 	attributes,
@@ -26,8 +25,6 @@ export default function QuoteEdit( {
 	className,
 	insertBlocksAfter,
 } ) {
-	const ref = useRef();
-	const blockProps = useBlock( ref );
 	const { align, value, citation } = attributes;
 
 	return (
@@ -41,10 +38,10 @@ export default function QuoteEdit( {
 				/>
 			</BlockControls>
 			<BlockQuotation
-				ref={ ref }
-				{ ...blockProps }
-				className={ classnames( blockProps.className, className, {
-					[ `has-text-align-${ align }` ]: align,
+				{ ...useBlockProps( {
+					className: classnames( className, {
+						[ `has-text-align-${ align }` ]: align,
+					} ),
 				} ) }
 			>
 				<RichText