From 0a2c977975961422cf0c5f2f0d3ac220b1162ac5 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Thu, 22 Aug 2024 14:49:48 +0200 Subject: [PATCH] improve flow and style --- packages/base-styles/_z-index.scss | 3 + .../src/components/post-fields/index.js | 245 +++++++++++++----- .../src/components/post-fields/style.scss | 52 ++++ packages/edit-site/src/style.scss | 1 + 4 files changed, 238 insertions(+), 63 deletions(-) create mode 100644 packages/edit-site/src/components/post-fields/style.scss diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 4d5f22e02fa7d1..99b3e6ea18ffdf 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -213,6 +213,9 @@ $z-layers: ( // Ensure quick actions toolbar appear above pagination ".dataviews-bulk-actions-toolbar": 2, + + // Needs to be below media library (.media-model) that has a z-index of 160000. + ".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown": 160000 - 10, ); @function z-index( $key ) { diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 1c8f2d3a4f89a2..d4558cf863f130 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -12,6 +12,7 @@ import { createInterpolateElement, useMemo, useState, + useCallback, } from '@wordpress/element'; import { dateI18n, getDate, getSettings } from '@wordpress/date'; import { @@ -22,8 +23,16 @@ import { pending, notAllowed, commentAuthorAvatar as authorIcon, + lineSolid, } from '@wordpress/icons'; -import { __experimentalHStack as HStack, Icon } from '@wordpress/components'; +import { + __experimentalHStack as HStack, + __experimentalVStack as VStack, + Icon, + Placeholder, + Button, + FlexItem, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; @@ -37,8 +46,7 @@ import { } from '../../utils/constants'; import { default as Link, useLink } from '../routes/link'; import Media from '../media'; -import { isBlobURL } from '@wordpress/blob'; -import { PostFeaturedImage } from '@wordpress/editor'; +import { MediaUpload } from '@wordpress/block-editor'; // See https://github.com/WordPress/gutenberg/issues/55886 // We do not support custom statutes at the moment. @@ -82,48 +90,6 @@ const getFormattedDate = ( dateToDisplay ) => getDate( dateToDisplay ) ); -function FeaturedImage( { item, viewType } ) { - const isDisabled = item.status === 'trash'; - const { onClick } = useLink( { - postId: item.id, - postType: item.type, - canvas: 'edit', - } ); - - const size = - viewType === LAYOUT_GRID - ? [ 'large', 'full', 'medium', 'thumbnail' ] - : [ 'thumbnail', 'medium', 'large', 'full' ]; - - const renderButton = viewType === LAYOUT_GRID && ! isDisabled; - return ( -
- { renderButton ? ( - - ) : ( - - ) } -
- ); -} - function PostStatusField( { item } ) { const status = STATUSES.find( ( { value } ) => value === item.status ); const label = status?.label || item.status; @@ -198,24 +164,6 @@ function usePostFields( viewType ) { const fields = useMemo( () => [ - { - id: 'featured_media', - label: __( 'Featured Image' ), - type: 'image', - getValue: ( { item } ) => { - const mediaUrl = isBlobURL( item.featured_media ) - ? item.featured_media - : getFeaturedMediaUrl( item.featured_media ) - ?.source_url; - return mediaUrl; - }, - render: ( { item } ) => { - return ( - - ); - }, - enableSorting: false, - }, { label: __( 'Title' ), id: 'title', @@ -412,6 +360,177 @@ function usePostFields( viewType ) { }, ], }, + { + id: 'featured_media', + label: __( 'Featured Image' ), + type: 'image', + render: ( { item } ) => { + const mediaId = item.featured_media; + + const media = getFeaturedMediaUrl( mediaId ); + + const url = media?.source_url; + const title = media?.title?.rendered; + + // This is a false positive + // eslint-disable-next-line react-hooks/rules-of-hooks + const { onClick } = useLink( { + postId: item.id, + postType: item.type, + canvas: 'edit', + } ); + + if ( viewType === LAYOUT_GRID && item.status !== 'trash' ) { + if ( ! url ) { + return null; + } + return ( + + ); + } + + if ( ! url ) { + return ( +
+ ); + } + + return ( + + + { title } + + ); + }, + Edit: ( { field, onChange, data } ) => { + const { id } = field; + + const value = field.getValue( { item: data } ) ?? ''; + + const onChangeControl = useCallback( + ( newValue ) => + onChange( { + [ id ]: newValue, + } ), + [ id, onChange ] + ); + + const media = getFeaturedMediaUrl( value ); + + const url = media?.source_url; + const title = media?.title?.rendered; + const filename = + media?.media_details?.file?.match( '([^/]+$)' )[ 0 ]; + + return ( +
+
+ + + onChangeControl( selectedMedia.id ) + } + allowedTypes={ [ 'image' ] } + render={ ( { open } ) => { + return ( + + ); + } } + /> + + { url && ( +
+
+ ); + }, + enableSorting: false, + }, ], [ authors, getFeaturedMediaUrl, viewType, frontPageId, postsPageId ] ); diff --git a/packages/edit-site/src/components/post-fields/style.scss b/packages/edit-site/src/components/post-fields/style.scss new file mode 100644 index 00000000000000..e52c3dd38e6c15 --- /dev/null +++ b/packages/edit-site/src/components/post-fields/style.scss @@ -0,0 +1,52 @@ +.edit-site-post-featured-image { + width: 20px; + height: 20px; +} + +.edit-site-dataviews-controls__featured-image { + .edit-side-dataviews-controls__featured-image-container { + border: var(--wp-admin-border-width-focus) solid $gray-300; + &:hover { + background-color: $gray-300; + } + } + + img { + width: 20px; + height: 20px; + } + + span { + text-align: justify; + margin-left: $grid-unit-15; + text-overflow: ellipsis; + overflow: hidden; + width: 150px; + } + + .edit-site-dataviews-controls__featured-image-filename { + color: $gray-700; + font-size: 10px; + } + + .edit-site-dataviews-controls__featured-image-upload-button { + height: fit-content; + &:hover, + &:focus { + border: 0; + color: unset; + } + } + + .edit-site-dataviews-controls__featured-image-element { + align-self: baseline; + } + + .edit-site-dataviews-controls__featured-image-remove-button { + align-self: baseline; + } +} + +.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown { + z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown"); +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 473deaeedc5908..5b57cbeb319807 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -29,6 +29,7 @@ @import "./components/style-book/style.scss"; @import "./components/editor-canvas-container/style.scss"; @import "./components/post-edit/style.scss"; +@import "./components/post-fields/style.scss"; @import "./components/post-list/style.scss"; @import "./components/resizable-frame/style.scss"; @import "./hooks/push-changes-to-global-styles/style.scss";