DataViews: Move PostList component to its own folder (#63334)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]>
WordPress · Jul 11, 2024 · 2180eb4 · 2180eb4
1 parent 1a825e9
commit 2180eb4
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -9,7 +9,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import Editor from '../editor';
-import PostsList from '../posts-app/posts-list';
+import PostList from '../post-list';
 import PagePatterns from '../page-patterns';
 import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
@@ -91,12 +91,12 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostsList postType={ postType } />,
+				content: <PostList postType={ postType } />,
 				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
 				mobile: hasEditCanvasMode ? (
 					<Editor />
 				) : (
-					<PostsList postType={ postType } />
+					<PostList postType={ postType } />
 				),
 			},
 			widths: {

diff --git a/...te/src/components/posts-app/posts-list.js → ...it-site/src/components/post-list/index.js b/...te/src/components/posts-app/posts-list.js → ...it-site/src/components/post-list/index.js
@@ -213,19 +213,19 @@ function FeaturedImage( { item, viewType } ) {
 			: [ 'thumbnail', 'medium', 'large', 'full' ];
 	const media = hasMedia ? (
 		<Media
-			className="posts-list-page__featured-image"
+			className="edit-site-post-list__featured-image"
 			id={ item.featured_media }
 			size={ size }
 		/>
 	) : null;
 	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
 	return (
 		<div
-			className={ `posts-list-page__featured-image-wrapper is-layout-${ viewType }` }
+			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
 		>
 			{ renderButton ? (
 				<button
-					className="posts-list-page-preview-field__button"
+					className="edit-site-post-list__featured-image-button"
 					type="button"
 					onClick={ onClick }
 					aria-label={ item.title?.rendered || __( '(no title)' ) }
@@ -250,7 +250,7 @@ function PostStatusField( { item } ) {
 	return (
 		<HStack alignment="left" spacing={ 0 }>
 			{ icon && (
-				<div className="posts-list-page-post-author-field__icon-container">
+				<div className="edit-site-post-list__status-icon">
 					<Icon icon={ icon } />
 				</div>
 			) }
@@ -297,7 +297,7 @@ function PostAuthorField( { item } ) {
 	);
 }
 
-export default function PostsList( { postType } ) {
+export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const history = useHistory();
 	const {
@@ -449,21 +449,21 @@ export default function PostsList( { postType } ) {
 					let suffix = '';
 					if ( item.id === frontPageId ) {
 						suffix = (
-							<span className="posts-list-page-title-badge">
+							<span className="edit-site-post-list__title-badge">
 								{ __( 'Front Page' ) }
 							</span>
 						);
 					} else if ( item.id === postsPageId ) {
 						suffix = (
-							<span className="posts-list-page-title-badge">
+							<span className="edit-site-post-list__title-badge">
 								{ __( 'Posts Page' ) }
 							</span>
 						);
 					}
 
 					return (
 						<HStack
-							className="posts-list-page-title"
+							className="edit-site-post-list__title"
 							alignment="center"
 							justify="flex-start"
 						>

diff --git a/...-site/src/components/posts-app/style.scss → ...-site/src/components/post-list/style.scss b/...-site/src/components/posts-app/style.scss → ...-site/src/components/post-list/style.scss
@@ -1,4 +1,4 @@
-.posts-list-page__featured-image {
+.edit-site-post-list__featured-image {
 	height: 100%;
 	object-fit: cover;
 	width: 100%;
@@ -9,8 +9,8 @@
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.posts-list-page-preview-field__button)),
-	&.is-layout-table .posts-list-page-preview-field__button {
+	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)),
+	&.is-layout-table .edit-site-post-list__featured-image-button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
@@ -33,7 +33,7 @@
 	}
 }
 
-.posts-list-page-preview-field__button {
+.edit-site-post-list__featured-image-button {
 	box-shadow: none;
 	border: none;
 	padding: 0;
@@ -53,18 +53,18 @@
 }
 
 .dataviews-view-grid__card.is-selected {
-	.posts-list-page-preview-field__button::after {
+	.edit-site-post-list__featured-image-button::after {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 }
 
-.posts-list-page-title span {
+.edit-site-post-list__title span {
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.posts-list-page-title-badge {
+.edit-site-post-list__title-badge {
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
@@ -74,7 +74,7 @@
 	flex-shrink: 0;
 }
 
-.posts-list-page-post-author-field__icon-container {
+.edit-site-post-list__status-icon {
 	height: $grid-unit-30;
 	width: $grid-unit-30;
 	svg {

diff --git a/packages/edit-site/src/components/posts-app/router.js b/packages/edit-site/src/components/posts-app/router.js
@@ -13,7 +13,7 @@ import Editor from '../editor';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import DataViewsSidebarContent from '../sidebar-dataviews';
-import PostsList from '../posts-app/posts-list';
+import PostList from '../post-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -40,15 +40,15 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostsList postType={ postType } />,
+				content: <PostList postType={ postType } />,
 				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isPostsList />
 				),
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isPostsList />
 					) : (
-						<PostsList postType={ postType } />
+						<PostList postType={ postType } />
 					),
 			},
 			widths: {

diff --git a/packages/edit-site/src/posts.scss b/packages/edit-site/src/posts.scss
@@ -7,7 +7,7 @@
 @import "./components/site-hub/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/editor-canvas-container/style.scss";
-@import "./components/posts-app/style.scss";
+@import "./components/post-list/style.scss";
 @import "./components/resizable-frame/style.scss";
 
 @include wordpress-admin-schemes();

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -28,7 +28,7 @@
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";
-@import "./components/posts-app/style.scss";
+@import "./components/post-list/style.scss";
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";