Add fixtures, add dimension panel for padding

WordPress · Sep 29, 2021 · 7c2395f · 7c2395f
1 parent d6fe6c8
commit 7c2395f
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 4 deletions.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -71,6 +71,7 @@ function gutenberg_reregister_core_block_types() {
 				'post-author.php'               => 'core/post-author',
 				'post-comment.php'              => 'core/post-comment',
 				'post-comment-author.php'       => 'core/post-comment-author',
+				'post-comment-avatar.php'       => 'core/post-comment-avatar',
 				'post-comment-content.php'      => 'core/post-comment-content',
 				'post-comment-date.php'         => 'core/post-comment-date',
 				'post-comments.php'             => 'core/post-comments',

diff --git a/packages/block-library/src/post-comment-avatar/block.json b/packages/block-library/src/post-comment-avatar/block.json
@@ -29,6 +29,12 @@
 		"html": false,
 		"__experimentalBorder": {
 			"radius": true
+		},
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
 		}
 	}
 }
diff --git a/packages/block-library/src/post-comment-avatar/edit.js b/packages/block-library/src/post-comment-avatar/edit.js
@@ -16,9 +16,11 @@ import { PanelBody, ResizableBox } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
 
 export default ( { attributes, context: { commentId }, setAttributes } ) => {
-	const { className, style, height, width, alt } = attributes;
+	const { className, style, height, width, alt, url } = attributes;
+
 	const { comment } = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
@@ -33,6 +35,18 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => {
 	const avatarUrls = authorAvatarUrls
 		? Object.values( authorAvatarUrls )
 		: null;
+	const [ { defaultWidth, defaultHeight }, setDefaultSize ] = useState( {} );
+
+	// Set default widht, height and url on first render.
+	useEffect( () => {
+		setDefaultSize( { defaultWidth: width, defaultHeight: height } );
+	}, [] );
+
+	useEffect( () => {
+		setAttributes( {
+			url: avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : '', // we get the biggest resolution one
+		} );
+	}, [ avatarUrls ] );
 	return (
 		<>
 			<InspectorControls>
@@ -41,8 +55,9 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => {
 						onChange={ ( value ) => setAttributes( value ) }
 						width={ width }
 						height={ height }
-						imageWidth={ width }
-						imageHeight={ height }
+						imageWidth={ defaultWidth }
+						imageHeight={ defaultHeight }
+						showPresets={ false }
 					/>
 				</PanelBody>
 			</InspectorControls>
@@ -81,7 +96,7 @@ export default ( { attributes, context: { commentId }, setAttributes } ) => {
 							style={ {
 								...borderProps.style,
 							} }
-							src={ avatarUrls[ 2 ] }
+							src={ url }
 							alt={ alt }
 						/>
 					</ResizableBox>

diff --git a/packages/block-library/src/post-comment-avatar/index.php b/packages/block-library/src/post-comment-avatar/index.php
@@ -0,0 +1,17 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comment-avatar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Registers the `core/post-comment-avatar` block on the server.
+ * We need to do this to make context available for inner blocks.
+ */
+function register_block_core_post_comment_avatar() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-comment-avatar'
+	);
+}
+add_action( 'init', 'register_block_core_post_comment_avatar' );
diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.html b/test/integration/fixtures/blocks/core__post-comment-avatar.html
@@ -0,0 +1,14 @@
+<!-- wp:post-comment-avatar {"url":"http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96\u0026d=monsterid\u0026r=g","style":{"spacing":{"padding":{"top":"5px","right":"10px","bottom":"15px","left":"20px"}}}} -->
+<img
+	style="
+		padding-top: 5px;
+		padding-right: 10px;
+		padding-bottom: 15px;
+		padding-left: 20px;
+	"
+	src="http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&amp;d=monsterid&amp;r=g"
+	alt=""
+	width="96"
+	height="96"
+/>
+<!-- /wp:post-comment-avatar -->
diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.json b/test/integration/fixtures/blocks/core__post-comment-avatar.json
@@ -0,0 +1,25 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-comment-avatar",
+		"isValid": true,
+		"attributes": {
+			"width": 96,
+			"height": 96,
+			"url": "http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&d=monsterid&r=g",
+			"alt": "",
+			"style": {
+				"spacing": {
+					"padding": {
+						"top": "5px",
+						"right": "10px",
+						"bottom": "15px",
+						"left": "20px"
+					}
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": "<img\n\tstyle=\"\n\t\tpadding-top: 5px;\n\t\tpadding-right: 10px;\n\t\tpadding-bottom: 15px;\n\t\tpadding-left: 20px;\n\t\"\n\tsrc=\"http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&amp;d=monsterid&amp;r=g\"\n\talt=\"\"\n\twidth=\"96\"\n\theight=\"96\"\n/>"
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json b/test/integration/fixtures/blocks/core__post-comment-avatar.parsed.json
@@ -0,0 +1,23 @@
+[
+	{
+		"blockName": "core/post-comment-avatar",
+		"attrs": {
+			"url": "http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&d=monsterid&r=g",
+			"style": {
+				"spacing": {
+					"padding": {
+						"top": "5px",
+						"right": "10px",
+						"bottom": "15px",
+						"left": "20px"
+					}
+				}
+			}
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<img\n\tstyle=\"\n\t\tpadding-top: 5px;\n\t\tpadding-right: 10px;\n\t\tpadding-bottom: 15px;\n\t\tpadding-left: 20px;\n\t\"\n\tsrc=\"http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&amp;d=monsterid&amp;r=g\"\n\talt=\"\"\n\twidth=\"96\"\n\theight=\"96\"\n/>\n",
+		"innerContent": [
+			"\n<img\n\tstyle=\"\n\t\tpadding-top: 5px;\n\t\tpadding-right: 10px;\n\t\tpadding-bottom: 15px;\n\t\tpadding-left: 20px;\n\t\"\n\tsrc=\"http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&amp;d=monsterid&amp;r=g\"\n\talt=\"\"\n\twidth=\"96\"\n\theight=\"96\"\n/>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html b/test/integration/fixtures/blocks/core__post-comment-avatar.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:post-comment-avatar {"url":"http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96\u0026d=monsterid\u0026r=g","style":{"spacing":{"padding":{"top":"5px","right":"10px","bottom":"15px","left":"20px"}}}} -->
+<img style="padding-top:5px;padding-right:10px;padding-bottom:15px;padding-left:20px" src="http://0.gravatar.com/avatar/c2b06ae950033b392998ada50767b50e?s=96&amp;d=monsterid&amp;r=g" alt="" width="96" height="96"/>
+<!-- /wp:post-comment-avatar -->