From c127160ed70eb0a6bc84aeedfe8cfba95260b351 Mon Sep 17 00:00:00 2001 From: Matthew Ell Date: Mon, 5 Jun 2023 12:54:44 -0400 Subject: [PATCH 1/5] Access featured media ID from rest endpoint --- .../block-editor-tools/src/components/post-picker/post-list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor-tools/src/components/post-picker/post-list.tsx b/packages/block-editor-tools/src/components/post-picker/post-list.tsx index cb31bc01..775ec09b 100644 --- a/packages/block-editor-tools/src/components/post-picker/post-list.tsx +++ b/packages/block-editor-tools/src/components/post-picker/post-list.tsx @@ -58,6 +58,7 @@ const PostList = ({ baseUrl, { page: params.page, + _embed: 1, }, ); if (params.searchValue && params.searchValue.length > 2) { From 5e8823256c4727a533c1e941e5bbcb176aff8380 Mon Sep 17 00:00:00 2001 From: Matthew Ell Date: Mon, 5 Jun 2023 12:56:42 -0400 Subject: [PATCH 2/5] Show featured image in PostPicker results --- .../components/post-picker/post-list-post.tsx | 49 +++++++++++++++++++ .../src/components/post-picker/post-list.scss | 16 +++--- .../src/components/post-picker/post-list.tsx | 18 +++---- 3 files changed, 67 insertions(+), 16 deletions(-) create mode 100644 packages/block-editor-tools/src/components/post-picker/post-list-post.tsx diff --git a/packages/block-editor-tools/src/components/post-picker/post-list-post.tsx b/packages/block-editor-tools/src/components/post-picker/post-list-post.tsx new file mode 100644 index 00000000..22bfc792 --- /dev/null +++ b/packages/block-editor-tools/src/components/post-picker/post-list-post.tsx @@ -0,0 +1,49 @@ +import { sprintf } from '@wordpress/i18n'; +import type { WP_REST_API_Attachment } from 'wp-types'; +import { useMedia } from '../../hooks'; + +interface PostListPostProps { + title: string; + postType: string, + featuredImgID: string | unknown, +} + +interface Media extends WP_REST_API_Attachment { + media_details: { + sizes: { + thumbnail: { + source_url: string; + }; + }; + }; +} + +/** + * Displays a single post in the post list post picker modal. + * + * @param {obj} atts The attributes of the PostListPost. + */ +const PostListPost = ({ + title, + postType, + featuredImgID, +}: PostListPostProps) => { + const media = useMedia(featuredImgID) as Media; + const thumbUrl = media?.media_details?.sizes?.thumbnail?.source_url; + const thumbAlt = media?.alt_text ?? ''; + + return ( +
+ {thumbUrl ? ({thumbAlt}) : null} + + {title} + + {sprintf( + ' (%s)', + postType, + )} +
+ ); +}; + +export default PostListPost; diff --git a/packages/block-editor-tools/src/components/post-picker/post-list.scss b/packages/block-editor-tools/src/components/post-picker/post-list.scss index b4549625..d9667e86 100644 --- a/packages/block-editor-tools/src/components/post-picker/post-list.scss +++ b/packages/block-editor-tools/src/components/post-picker/post-list.scss @@ -1,20 +1,24 @@ .alley-scripts-post-picker__post-list { + display: flex; + flex-wrap: wrap; float: left; height: calc(70vh - 200px); + justify-content: space-between; 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; + flex-direction: column; + height: auto; + justify-content: center; + margin-bottom: 5px; padding: 0.5rem 0.75rem; transition: background-color 0.2s ease-in-out; - width: 150px; + width: 160px; &:hover { background-color: #f5f5f5; @@ -30,4 +34,4 @@ float: left; text-align: center; width: 100%; -} \ No newline at end of file +} diff --git a/packages/block-editor-tools/src/components/post-picker/post-list.tsx b/packages/block-editor-tools/src/components/post-picker/post-list.tsx index 775ec09b..6c48bf65 100644 --- a/packages/block-editor-tools/src/components/post-picker/post-list.tsx +++ b/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 PostListPost from './post-list-post'; interface PostListProps { baseUrl: string; @@ -161,15 +162,12 @@ const PostList = ({ {searchRender ? ( searchRender(t) ) : ( -
- - {t.title} - - {sprintf( - ' (%s)', - t.subtype, - )} -
+ )} )) From 279d2f1f9322cf3df238d066f3de8724e2308dc4 Mon Sep 17 00:00:00 2001 From: Matthew Ell Date: Mon, 5 Jun 2023 14:18:23 -0400 Subject: [PATCH 3/5] Rework for reusable Post component --- .../src/components/post-picker/index.tsx | 26 +++---- .../components/post-picker/post-list-post.tsx | 49 ------------- .../src/components/post-picker/post-list.scss | 15 ++-- .../src/components/post-picker/post-list.tsx | 6 +- .../src/components/post-picker/post.tsx | 68 +++++++++++++++++++ 5 files changed, 88 insertions(+), 76 deletions(-) delete mode 100644 packages/block-editor-tools/src/components/post-picker/post-list-post.tsx create mode 100644 packages/block-editor-tools/src/components/post-picker/post.tsx diff --git a/packages/block-editor-tools/src/components/post-picker/index.tsx b/packages/block-editor-tools/src/components/post-picker/index.tsx index d6157145..69aafa8e 100644 --- a/packages/block-editor-tools/src/components/post-picker/index.tsx +++ b/packages/block-editor-tools/src/components/post-picker/index.tsx @@ -5,13 +5,14 @@ import { Button, 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[]; @@ -77,10 +78,6 @@ const PostPicker = ({ type = '', } = post || {}; - const media = useMedia(featuredMediaId) as any as WP_REST_API_Attachment; - - const postImage = media ? media.source_url : ''; - const controls = () => ( diff --git a/packages/block-editor-tools/src/components/post-picker/post.tsx b/packages/block-editor-tools/src/components/post-picker/post.tsx new file mode 100644 index 00000000..f7e92130 --- /dev/null +++ b/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 ( + + {thumbUrl ? ( + {thumbAlt} + ) : null} + + {title} + + {sprintf( + ' (%s)', + postType, + )} + + ); +}; + +export default Post; From 48895796f00b8c69cfb2aa47f9b7338dfab1e4ff Mon Sep 17 00:00:00 2001 From: Greg Marshall Date: Mon, 5 Jun 2023 14:31:47 -0500 Subject: [PATCH 4/5] merging in main --- .../src/components/post-picker/index.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/block-editor-tools/src/components/post-picker/index.tsx b/packages/block-editor-tools/src/components/post-picker/index.tsx index c94f59c4..71bff5b5 100644 --- a/packages/block-editor-tools/src/components/post-picker/index.tsx +++ b/packages/block-editor-tools/src/components/post-picker/index.tsx @@ -79,21 +79,6 @@ const PostPicker = ({ type = '', } = post || {}; -<<<<<<< HEAD - const controls = () => ( - - ); -======= - const media = useMedia(featuredMediaId) as any as WP_REST_API_Attachment; - - const postImage = media ? media.source_url : ''; ->>>>>>> origin/main - const openModal = () => { setShowModal(true); }; From c8e7bc335e7b269f04958a27626b5f818120e8d9 Mon Sep 17 00:00:00 2001 From: Greg Marshall Date: Mon, 5 Jun 2023 14:34:42 -0500 Subject: [PATCH 5/5] bump version --- packages/block-editor-tools/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor-tools/package.json b/packages/block-editor-tools/package.json index c6769bce..03c62757 100644 --- a/packages/block-editor-tools/package.json +++ b/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",