fix(ui): apply consistent styling to custom & default block thumbnails (#11555)

Fixes #9744

Author: PatrikKozak

packages/payload/src/fields/config/types.ts

@@ -1399,6 +1399,9 @@ export type Block = {
     singularName?: string
   }
   imageAltText?: string
+  /**
+   * Preferred aspect ratio of the image is 3 : 2
+   */
   imageURL?: string
   /** Customize generated GraphQL and Typescript schema names.
    * The slug is used by default.

packages/ui/src/elements/ThumbnailCard/index.scss

@@ -9,9 +9,10 @@
     border: 1px solid var(--theme-border-color);
     border-radius: var(--style-radius-m);
     transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+    padding: base(0.5);
 
     &__label {
-      padding: base(0.5);
+      padding: base(0.75) base(0.5) base(0.25) base(0.5);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

packages/ui/src/fields/Blocks/BlocksDrawer/index.scss

@@ -16,9 +16,19 @@
     }
 
     &__default-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
+      aspect-ratio: 3 / 2;
       overflow: hidden;
-      padding-top: base(0.75);
+
+      img,
+      svg {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
 
     &__block-groups {
@@ -60,7 +70,6 @@
 
       &__blocks {
         grid-template-columns: repeat(3, 1fr);
-        gap: base(0.5);
       }
 
       &__block-groups {

packages/ui/src/fields/Blocks/BlocksDrawer/index.tsx

@@ -123,13 +123,13 @@ export const BlocksDrawer: React.FC<Props> = (props) => {
                             closeModal(drawerSlug)
                           }}
                           thumbnail={
-                            imageURL ? (
-                              <img alt={imageAltText} src={imageURL} />
-                            ) : (
-                              <div className={`${baseClass}__default-image`}>
+                            <div className={`${baseClass}__default-image`}>
+                              {imageURL ? (
+                                <img alt={imageAltText} src={imageURL} />
+                              ) : (
                                 <DefaultBlockImage />
-                              </div>
-                            )
+                              )}
+                            </div>
                           }
                         />
                       </li>

packages/ui/src/graphics/DefaultBlockImage/index.tsx

@@ -2,22 +2,43 @@ import React, { useState } from 'react'
 import { v4 as uuid } from 'uuid'
 
 export const DefaultBlockImage: React.FC = () => {
-  const [patternID] = useState(`pattern${uuid()}`)
-  const [imageID] = useState(`image${uuid()}`)
+  const [patternID] = useState(() => `pattern${uuid()}`)
 
   return (
-    <svg fill="none" height="53" viewBox="0 0 82 53" width="82">
-      <rect fill={`url(#${patternID})`} height="52.7791" width="80.574" x="0.713013" />
-      <defs>
-        <pattern height="1" id={`${patternID}`} patternContentUnits="objectBoundingBox" width="1">
-          <use transform="scale(0.00387597 0.00591716)" xlinkHref={`#${imageID}`} />
-        </pattern>
-        <image
-          height="169"
-          id={imageID}
-          width="258"
-          xlinkHref="data:image/png;base64,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"
+    <svg
+      fill="none"
+      height="151"
+      preserveAspectRatio="xMidYMid slice"
+      viewBox="0 0 231 151"
+      width="231"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath={`url(#${patternID})`}>
+        <rect fill="#D9D9D9" height="100%" rx="2" width="100%" />
+        <rect
+          fill="#BCBCBC"
+          height="116.063"
+          transform="rotate(52.0687 33.7051 79.3051)"
+          width="85.8593"
+          x="33.7051"
+          y="79.3051"
+        />
+        <rect
+          fill="#BCBCBC"
+          height="116.063"
+          transform="rotate(52.0687 86.1219 92.6272)"
+          width="85.8593"
+          x="86.1219"
+          y="92.6272"
         />
+        <circle cx="189" cy="45" fill="#BCBCBC" r="19" />
+        <rect fill="#B8B8B8" height="5" rx="2.5" width="98" x="66" y="70" />
+        <rect fill="#B8B8B8" height="5" rx="2.5" width="76" x="77" y="82" />
+      </g>
+      <defs>
+        <clipPath id={`${patternID}`}>
+          <rect fill="white" height="151" width="231" />
+        </clipPath>
       </defs>
     </svg>
   )

test/fields/collections/Blocks/index.ts

@@ -11,6 +11,7 @@ export const getBlocksField = (prefix?: string): BlocksField => ({
   blocks: [
     {
       slug: prefix ? `${prefix}Content` : 'content',
+      imageURL: '/api/uploads/file/payload480x320.jpg',
       interfaceName: prefix ? `${prefix}ContentBlock` : 'ContentBlock',
       admin: {
         components: {

test/fields/collections/Upload/payload480x320.jpg

@@ -901,7 +901,7 @@ export interface ContentBlock {
  * via the `definition` "NoBlockname".
  */
 export interface NoBlockname {
-  text: string;
+  text?: string | null;
   id?: string | null;
   blockName?: string | null;
   blockType: 'noBlockname';
@@ -967,7 +967,7 @@ export interface LocalizedContentBlock {
  * via the `definition` "localizedNoBlockname".
  */
 export interface LocalizedNoBlockname {
-  text: string;
+  text?: string | null;
   id?: string | null;
   blockName?: string | null;
   blockType: 'localizedNoBlockname';

test/fields/payload-types.ts

@@ -69,10 +69,15 @@ const dirname = path.dirname(filename)
 
 export const seed = async (_payload: Payload) => {
   const jpgPath = path.resolve(dirname, './collections/Upload/payload.jpg')
+  const jpg480x320Path = path.resolve(dirname, './collections/Upload/payload480x320.jpg')
   const pngPath = path.resolve(dirname, './uploads/payload.png')
 
   // Get both files in parallel
-  const [jpgFile, pngFile] = await Promise.all([getFileByPath(jpgPath), getFileByPath(pngPath)])
+  const [jpgFile, jpg480x320File, pngFile] = await Promise.all([
+    getFileByPath(jpgPath),
+    getFileByPath(jpg480x320Path),
+    getFileByPath(pngPath),
+  ])
 
   const createdArrayDoc = await _payload.create({
     collection: arrayFieldsSlug,
@@ -121,6 +126,14 @@ export const seed = async (_payload: Payload) => {
     overrideAccess: true,
   })
 
+  await _payload.create({
+    collection: uploadsSlug,
+    data: {},
+    file: jpg480x320File,
+    depth: 0,
+    overrideAccess: true,
+  })
+
   // const createdJPGDocSlug2 = await _payload.create({
   //   collection: uploads2Slug,
   //   data: {