Placeholder cannot be block wrapper

WordPress · Aug 12, 2021 · f0e8004 · f0e8004
1 parent 422c093
commit f0e8004
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 68 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -511,7 +511,6 @@ context in the block editor's writing flow.
 _Parameters_
 
 -   _props_ `Object`:
--   _props.wrapperProps_ `Object`:
 
 _Returns_
 

diff --git a/packages/block-editor/src/components/embedded-admin-context/index.js b/packages/block-editor/src/components/embedded-admin-context/index.js
@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
-import { useState, createPortal, forwardRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { useState, createPortal } from '@wordpress/element';
 import { ENTER, SPACE, ESCAPE } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
-function EmbeddedAdminContext( props, forwardedRef ) {
+export default function EmbeddedAdminContext( props ) {
 	const [ shadow, setShadow ] = useState();
 	const [ hasFocus, setHasFocus ] = useState();
 	const ref = useRefEffect( ( element ) => {
@@ -27,7 +27,7 @@ function EmbeddedAdminContext( props, forwardedRef ) {
 					cssText += cssRule.cssText;
 				}
 
-				style.textContent = cssText;
+				style.textContent += cssText;
 			} catch ( e ) {
 				root.appendChild( styleSheet.ownerNode.cloneNode( true ) );
 			}
@@ -53,7 +53,7 @@ function EmbeddedAdminContext( props, forwardedRef ) {
 	return (
 		<div
 			{ ...props }
-			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
+			ref={ ref }
 			tabIndex={ 0 }
 			role="button"
 			aria-pressed={ hasFocus }
@@ -78,5 +78,3 @@ function EmbeddedAdminContext( props, forwardedRef ) {
 		</div>
 	);
 }
-
-export default forwardRef( EmbeddedAdminContext );
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -75,7 +75,6 @@ export function MediaPlaceholder( {
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
 	children,
-	wrapperProps,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -244,7 +243,6 @@ export function MediaPlaceholder( {
 				onClick={ onClick }
 				onDoubleClick={ onDoubleClick }
 				preview={ mediaPreview }
-				wrapperProps={ wrapperProps }
 			>
 				{ content }
 				{ children }

diff --git a/packages/block-editor/src/components/placeholder/index.js b/packages/block-editor/src/components/placeholder/index.js
@@ -14,13 +14,12 @@ import EmbeddedAdminContext from '../embedded-admin-context';
  * context in the block editor's writing flow.
  *
  * @param {Object} props
- * @param {Object} props.wrapperProps
  *
  * @return {WPComponent} The component
  */
-export default function IsolatedPlaceholder( { wrapperProps, ...props } ) {
+export default function IsolatedPlaceholder( props ) {
 	return (
-		<EmbeddedAdminContext { ...wrapperProps }>
+		<EmbeddedAdminContext aria-label={ props.label }>
 			<Placeholder
 				{ ...props }
 				role="dialog"

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -115,17 +115,18 @@ function AudioEdit( {
 	}
 	if ( ! src ) {
 		return (
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				onSelect={ onSelectAudio }
-				onSelectURL={ onSelectURL }
-				accept="audio/*"
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				value={ attributes }
-				notices={ noticeUI }
-				onError={ onUploadError }
-				wrapperProps={ blockProps }
-			/>
+			<div { ...blockProps }>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					onSelect={ onSelectAudio }
+					onSelectURL={ onSelectURL }
+					accept="audio/*"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					value={ attributes }
+					notices={ noticeUI }
+					onError={ onUploadError }
+				/>
+			</div>
 		);
 	}
 

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -190,20 +190,21 @@ function FileEdit( {
 
 	if ( ! href || hasError ) {
 		return (
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				labels={ {
-					title: __( 'File' ),
-					instructions: __(
-						'Upload a file or pick one from your media library.'
-					),
-				} }
-				onSelect={ onSelectFile }
-				notices={ noticeUI }
-				onError={ onUploadError }
-				accept="*"
-				wrapperProps={ blockProps }
-			/>
+			<div { ...blockProps }>
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					labels={ {
+						title: __( 'File' ),
+						instructions: __(
+							'Upload a file or pick one from your media library.'
+						),
+					} }
+					onSelect={ onSelectFile }
+					notices={ noticeUI }
+					onError={ onUploadError }
+					accept="*"
+				/>
+			</div>
 		);
 	}
 

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -19,6 +19,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 
 /* global wp */
@@ -286,6 +287,14 @@ export function ImageEdit( {
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;
+	const mediaPreview = !! url && (
+		<img
+			alt={ __( 'Edit image' ) }
+			title={ __( 'Edit image' ) }
+			className={ 'edit-image-preview' }
+			src={ url }
+		/>
+	);
 
 	const classes = classnames( className, {
 		'is-transient': temporaryURL,
@@ -298,37 +307,23 @@ export function ImageEdit( {
 		className: classes,
 	} );
 
-	if ( ! temporaryURL && ! url ) {
-		return (
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				onSelect={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				notices={ noticeUI }
-				onError={ onUploadError }
-				accept="image/*"
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				value={ { id, src } }
-				wrapperProps={ blockProps }
-			/>
-		);
-	}
-
 	return (
 		<figure { ...blockProps }>
-			<Image
-				temporaryURL={ temporaryURL }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				isSelected={ isSelected }
-				insertBlocksAfter={ insertBlocksAfter }
-				onReplace={ onReplace }
-				onSelectImage={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onUploadError={ onUploadError }
-				containerRef={ ref }
-				clientId={ clientId }
-			/>
+			{ ( temporaryURL || url ) && (
+				<Image
+					temporaryURL={ temporaryURL }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					onReplace={ onReplace }
+					onSelectImage={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onUploadError={ onUploadError }
+					containerRef={ ref }
+					clientId={ clientId }
+				/>
+			) }
 			{ ! url && (
 				<BlockControls group="block">
 					<BlockAlignmentControl
@@ -338,10 +333,16 @@ export function ImageEdit( {
 				</BlockControls>
 			) }
 			<MediaPlaceholder
+				icon={ <BlockIcon icon={ icon } /> }
 				onSelect={ onSelectImage }
+				onSelectURL={ onSelectURL }
+				notices={ noticeUI }
 				onError={ onUploadError }
+				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				disableMediaButtons={ true }
+				value={ { id, src } }
+				mediaPreview={ mediaPreview }
+				disableMediaButtons={ temporaryURL || url }
 			/>
 		</figure>
 	);