Add placeholder for comment avatar

WordPress · Jan 27, 2022 · e5127d7 · e5127d7
1 parent 604f540
commit e5127d7
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/packages/block-library/src/comment-author-avatar/edit.js b/packages/block-library/src/comment-author-avatar/edit.js
@@ -6,9 +6,15 @@ import {
 	useBlockProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
+import {
+	PanelBody,
+	ResizableBox,
+	RangeControl,
+	SVG,
+	Path,
+} from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { __, _x, isRTL } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 
 export default function Edit( {
 	attributes,
@@ -89,9 +95,40 @@ export default function Edit( {
 			/>
 		</ResizableBox>
 	) : (
-		<p { ...blockProps }>
-			{ _x( 'Comment Author Avatar', 'block title' ) }
-		</p>
+		<div { ...blockProps }>
+			<ResizableBox
+				size={ {
+					width,
+					height,
+				} }
+				showHandle={ isSelected }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					setAttributes( {
+						height: parseInt( height + delta.height, 10 ),
+						width: parseInt( width + delta.width, 10 ),
+					} );
+				} }
+				lockAspectRatio
+				enable={ {
+					top: false,
+					right: ! isRTL(),
+					bottom: true,
+					left: isRTL(),
+				} }
+				minWidth={ minSize }
+				maxWidth={ maxSizeBuffer }
+			>
+				<SVG
+					className="wp-block-comment-author-avatar__placeholder"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 60 60"
+					preserveAspectRatio="none"
+				>
+					<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
+				</SVG>
+			</ResizableBox>
+		</div>
 	);
 
 	return (

diff --git a/packages/block-library/src/comment-author-avatar/editor.scss b/packages/block-library/src/comment-author-avatar/editor.scss
@@ -0,0 +1,8 @@
+.wp-block-comment-author-avatar__placeholder {
+	border: currentColor 1px dashed;
+	width: 100%;
+	height: 100%;
+	stroke: currentColor;
+	stroke-dasharray: 3;
+	opacity: 0.4;
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -5,6 +5,7 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comment-author-avatar/editor.scss";
 @import "./comments-query-loop/editor.scss";
 @import "./comments-pagination/editor.scss";
 @import "./comments-pagination-numbers/editor.scss";