Include thumbnails by default in post selector

packages/block-editor-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alleyinteractive/block-editor-tools",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A set of tools to help build products for the WordPress block editor.",
   "main": "./build/index.bundle.min.js",
   "types": "./build/index.d.ts",

packages/block-editor-tools/src/components/post-picker/index.tsx

@@ -6,13 +6,14 @@ import {
   ButtonGroup,
   Spinner,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import type { WP_REST_API_Post, WP_REST_API_Attachment } from 'wp-types';
+import type { WP_REST_API_Post } from 'wp-types';
 
-import { useMedia, usePostById } from '../../hooks';
+import { usePostById } from '../../hooks';
 
 import SearchModal from './search-modal';
+import Post from './post';
 
 interface PostPickerProps {
   allowedTypes?: string[];
@@ -78,10 +79,6 @@ const PostPicker = ({
     type = '',
   } = post || {};
 
-  const media = useMedia(featuredMediaId) as any as WP_REST_API_Attachment;
-
-  const postImage = media ? media.source_url : '';
-
   const openModal = () => {
     setShowModal(true);
   };
@@ -133,16 +130,11 @@ const PostPicker = ({
             previewRender(post)
           ) : (
             <Preview>
-              {postImage ? (
-                <img src={postImage} alt="" />
-              ) : null}
-              <strong>
-                {title}
-              </strong>
-              {sprintf(
-                ' (%s)',
-                type,
-              )}
+              <Post
+                title={title}
+                postType={type}
+                attachmentID={featuredMediaId}
+              />
             </Preview>
           )}
           {controls()}

packages/block-editor-tools/src/components/post-picker/post-list.scss

@@ -1,20 +1,25 @@
 .alley-scripts-post-picker__post-list {
+  display: flex;
+  flex-wrap: wrap;
   float: left;
   height: calc(70vh - 200px);
+  justify-content: flex-start;
   overflow-y: auto;
+  padding: 8px;
 }
 
 .alley-scripts-post-picker__post {
-  align-items: center;
   border: 1px solid #eee;
-  display: flex;
-  float: left;
-  height: 150px;
-  margin: 5px;
-  overflow: hidden;
-  padding: 0.5rem 0.75rem;
+  height: auto;
+  justify-content: center;
+  margin: 0 8px 8px 0;
   transition: background-color 0.2s ease-in-out;
-  width: 150px;
+  width: calc((100% - 40px) / 3);
+
+
+  @media (min-width: 780px) {
+    width: calc((100% - 40px) / 5);
+  }
 
   &:hover {
     background-color: #f5f5f5;
@@ -30,4 +35,4 @@
   float: left;
   text-align: center;
   width: 100%;
-}
+}

packages/block-editor-tools/src/components/post-picker/post-list.tsx

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Button, TextControl, Spinner } from '@wordpress/components';
 import classNames from 'classnames';
 import type { WP_REST_API_Search_Results } from 'wp-types';
 
 import './post-list.scss';
+import Post from './post';
 
 interface PostListProps {
   baseUrl: string;
@@ -58,6 +59,7 @@ const PostList = ({
         baseUrl,
         {
           page: params.page,
+          _embed: 1,
         },
       );
       if (params.searchValue && params.searchValue.length > 2) {
@@ -160,15 +162,12 @@ const PostList = ({
               {searchRender ? (
                 searchRender(t)
               ) : (
-                <div>
-                  <strong>
-                    {t.title}
-                  </strong>
-                  {sprintf(
-                    ' (%s)',
-                    t.subtype,
-                  )}
-                </div>
+                <Post
+                  title={t.title}
+                  postType={t.subtype}
+                    // eslint-disable-next-line no-underscore-dangle
+                  attachmentID={t?._embedded?.self[0]?.featured_media}
+                />
               )}
             </Button>
           ))

packages/block-editor-tools/src/components/post-picker/post.tsx

@@ -0,0 +1,68 @@
+import { sprintf } from '@wordpress/i18n';
+import type { WP_REST_API_Attachment } from 'wp-types';
+import styled from 'styled-components';
+import { useMedia } from '../../hooks';
+
+interface PostInterface {
+  title: string;
+  postType: string,
+  attachmentID: string | unknown,
+}
+
+interface Media extends WP_REST_API_Attachment {
+  media_details: {
+    sizes: {
+      thumbnail: {
+        source_url: string;
+      };
+    };
+  };
+}
+
+// Styled components.
+const PostDiv = styled.div`
+  align-items: center;
+  gap: 4px;
+  overflow-wrap: anywhere;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.5rem 0.75rem;
+`;
+
+/**
+ * Displays a single post.
+ *
+ * @param {obj} atts The attributes of the Post.
+ */
+const Post = ({
+  title,
+  postType,
+  attachmentID,
+}: PostInterface) => {
+  const media = useMedia(attachmentID) as Media;
+  const thumbUrl = media?.media_details?.sizes?.thumbnail?.source_url;
+  const thumbAlt = media?.alt_text ?? '';
+
+  return (
+    <PostDiv>
+      {thumbUrl ? (
+        <img
+          style={{ maxWidth: '100%', height: 'auto' }}
+          loading="lazy"
+          src={thumbUrl}
+          alt={thumbAlt}
+        />
+      ) : null}
+      <strong>
+        {title}
+      </strong>
+      {sprintf(
+        ' (%s)',
+        postType,
+      )}
+    </PostDiv>
+  );
+};
+
+export default Post;