image

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

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
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,
-	__experimentalBlock as Block,
+	__experimentalUseBlock as useBlock,
 	__experimentalImageSizeControl as ImageSizeControl,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 } from '@wordpress/block-editor';
@@ -120,6 +120,7 @@ export function ImageEdit( {
 	onReplace,
 } ) {
 	const ref = useRef();
+	const blockProps = useBlock( ref );
 	const { image, maxWidth, isRTL, imageSizes, mediaUpload } = useSelect(
 		( select ) => {
 			const { getMedia } = select( 'core' );
@@ -408,7 +409,7 @@ export function ImageEdit( {
 		return (
 			<>
 				{ controls }
-				<Block.div>{ mediaPlaceholder }</Block.div>
+				<figure { ...blockProps }>{ mediaPlaceholder }</figure>
 			</>
 		);
 	}
@@ -594,7 +595,10 @@ export function ImageEdit( {
 	return (
 		<>
 			{ controls }
-			<Block.figure ref={ ref } className={ classes }>
+			<figure
+				{ ...blockProps }
+				className={ classnames( blockProps.className, classes ) }
+			>
 				{ img }
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
@@ -613,7 +617,7 @@ export function ImageEdit( {
 					/>
 				) }
 				{ mediaPlaceholder }
-			</Block.figure>
+			</figure>
 		</>
 	);
 }

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,
-	__experimentalBlock as Block,
+	__experimentalUseBlock as useBlock,
 } from '@wordpress/block-editor';
 import { ToolbarGroup } from '@wordpress/components';
 import {
@@ -30,6 +30,7 @@ import {
 	formatOutdentRTL,
 } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,6 +45,8 @@ 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';
 
@@ -160,7 +163,7 @@ export default function ListEdit( {
 				identifier="values"
 				multiline="li"
 				__unstableMultilineRootTag={ tagName }
-				tagName={ Block[ tagName ] }
+				tagName={ tagName }
 				onChange={ ( nextValues ) =>
 					setAttributes( { values: nextValues } )
 				}
@@ -178,6 +181,8 @@ export default function ListEdit( {
 				start={ start }
 				reversed={ reversed }
 				type={ type }
+				ref={ ref }
+				{ ...blockProps }
 			>
 				{ controls }
 			</RichText>

diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
@@ -18,5 +18,8 @@
 		"align": {
 			"type": "string"
 		}
+	},
+	"supports": {
+		"lightBlockWrapper": true
 	}
 }
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -11,9 +11,11 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 	RichText,
+	__experimentalUseBlock as useBlock,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
 
 export default function QuoteEdit( {
 	attributes,
@@ -24,6 +26,8 @@ export default function QuoteEdit( {
 	className,
 	insertBlocksAfter,
 } ) {
+	const ref = useRef();
+	const blockProps = useBlock( ref );
 	const { align, value, citation } = attributes;
 
 	return (
@@ -37,7 +41,9 @@ export default function QuoteEdit( {
 				/>
 			</BlockControls>
 			<BlockQuotation
-				className={ classnames( className, {
+				ref={ ref }
+				{ ...blockProps }
+				className={ classnames( blockProps.className, className, {
 					[ `has-text-align-${ align }` ]: align,
 				} ) }
 			>