Data View - Page View: Add Featured Image Control #64496

gigitux · 2024-08-14T09:13:23Z

What?

This PR adds the Featured Image Control for the Page view.

Screen.Capture.on.2024-09-18.at.18-09-37.mov

View mode

Grid	Table	Layout

Edit

Without Image	With Image

Additional Changes

Render component and view props

With this PR, the render component will now receive the view prop. This addition is necessary because the component’s layout needs to adapt based on the view. Similar cases include the Title field, where different layouts are required depending on the view.

gutenberg/packages/edit-site/src/components/post-fields/index.js

Lines 163 to 164 in 8356977

    
           [ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) && 
        
           item.status !== 'trash';

Fix error on bulk edit mode

Screen.Capture.on.2024-09-18.at.18-01-00.mp4

Uncaught TypeError: Cannot read properties of null (reading 'status')

Currently, there is an error when the user edits a field in bulk mode. This PR fixes this error.

Attachment type

This PR updates the Attachment type.

Why?

How?

Testing Instructions

Ensure that Quick Edit in DataViews and Quick Edit in DataViews are enabled.

Visit the Site Editor
Click on pages.
Toggle to the table view.
Click on the settings.
Make the feature image field visible.
Click on details panel icon.
Ensure that the Featured Image option is available.
Click on it.
Ensure that the Media Gallery opens and click on an image.
Save.
Ensure that the image is set as the featured image to the post.
Toggle to the grid view.
Ensure that the image is rendered correctly.
Toggle to the list view.
Ensure that the image is rendered correctly.

Testing Instructions for Keyboard

Screenshots or screencast

…image-control

jameskoster · 2024-08-15T14:08:32Z

To be clear, I think the Featured Image control should remain as it is currently in terms of design and position.

However I also recognise that panel Data Forms should be able to handle image fields, respecting the established conventions of this layout. Here's a mockup and flow that could achieve that:

What do you think?

gigitux · 2024-08-16T09:54:56Z

To be clear, I think the Featured Image control should remain as it is currently in terms of design and position.

However I also recognise that panel Data Forms should be able to handle image fields, respecting the established conventions of this layout. Here's a mockup and flow that could achieve that:
What do you think?

Thanks for your feedback! It makes sense! I'm going to implement your feedback! 🚀

…image-control

gigitux · 2024-08-22T13:57:29Z

Hey @jameskoster, I've implemented your suggestion:

Screen.Capture.on.2024-08-22.at.15-42-51.mp4

Let me know if, from the design perspective, there is something to address.

I’m not marking this PR as ready for review because we still need to implement the default edit control for the image field. Since DataViews is a general-purpose library, we shouldn’t rely on the WordPress Media Gallery for the generic control. Instead, I suggest using the Operating System’s file selection option:

Screen.Capture.on.2024-08-22.at.15-52-20.mp4

However, please note that in this case, we won’t have access to the filename once the file is uploaded.

jameskoster · 2024-08-22T15:21:36Z

Thanks for the update. The flow seems pretty good, but there are some design details to fix.

Border radius is missing
Border should use $border-width (not the focus width)
Border color should be $gray-300
Hover background should be $gray-100
Thumbnail should be 24px
The thumbnail appearance should match unset color swatches
Gap between swatch and text should be 8px (seems you can remove the margin on the span)
Padding should be 8px 12px

Also here:

Thumbnail should be 24px with $radius-small border-radius. Ideally there should be a semi-transparent black outline so that white images are still visible. You can see an example in data views if you toggle on the preview.
Image name container height should be 24px to align with thumbnail
Filename should be 12px, with 16px line-height
Gap between thumbnail and text should be 8px (again, removing the margin on the span should fix)
Padding should be 8px 12px
Reset button size should be small (24px) to align with the image name / thumbnail
Ideally the filename would be truncated so that you can see the filetype. Perhaps this can be accomplished by using the Text component with the truncate and ellipsizeMode props.

Here's a mockup that hopefully clarifies some of the details:

gigitux · 2024-08-23T08:24:21Z

With 9a39fe6, I addressed your feedback!

Screen.Capture.on.2024-08-23.at.10-14-17.mp4

The only remaining challenge is that the filename can only be truncated to a fixed number of characters, which may result in it not always ending directly under the remove button.

gigitux · 2024-08-23T08:26:26Z

packages/edit-site/src/components/post-fields/index.js

+														event.target.tagName.toLowerCase();
+													// Prevent opening the media modal when clicking on the button/icon.
+													if (
+														element !== 'button' &&
+														element !== 'svg'
+													) {


The issue is that there's a button within a clickable area, and clicking the button triggers a separate action. I'm not sure if this is the best way to handle it.

Yeah we should avoid nested buttons. We had a similar issue in data views list layout... this UI:

Perhaps some of the techniques there can be borrowed?

gigitux · 2024-08-23T08:27:22Z

packages/edit-site/src/components/post-fields/index.js

+									render={ ( { open } ) => {
+										return (
+											<div
+												role="button"


Related comment: https://github.com/WordPress/gutenberg/pull/64496/files#r1728584779

jameskoster · 2024-08-23T10:49:42Z

Nice, it's getting there :)

Border-radius on the thumbnail and button are still missing.

Truncation of the file name seems to occur slightly before it's necessary. In the screenshot below note that there's more space the title could occypy.

I know the button that appears in the panel is a work in progress, but I wonder if it could have the same appearance as the author field. What do you think?

gigitux · 2024-08-23T11:16:21Z

Truncation of the file name seems to occur slightly before it's necessary. In the screenshot below note that there's more space the title could occypy.

As I mentioned in the previous comment, this could be complex to achieve given that Text components can only truncate to a fixed number of characters, which may result in it not always ending directly under the remove button.

I know the button that appears in the panel is a work in progress, but I wonder if it could have the same appearance as the author field. What do you think?

Do you mean something like this?

jameskoster · 2024-08-23T11:24:43Z

given that Text components can only truncate to a fixed number of characters

Are you sure? It seems to truncate based on width when truncate is true and numberOfLines is 1?

Do you mean something like this?

Sorry I should have been more explicit. See the mockup below and notice that the Author and Featured Image buttons (outlined in red) share the same characteristics; thumbnail size, gap, spacing, etc.

gigitux · 2024-08-23T11:29:55Z

Are you sure? It seems to truncate based on width when truncate is true and numberOfLines is 1?

The documentation says that when ellipsizeMode is middle (our case), the limit property is required:

´Limit` is the max number of characters to be displayed:

So, if we want to truncate in the middle (so, showing the extension), we need to explicit the max number of characters.

Sorry I should have been more explicit. See the mockup below and notice that the Author and Featured Image buttons (outlined in red) share the same characteristics; thumbnail size, gap, spacing, etc.

No worries! Gotcha! Thanks! 🙇

…image-control

gigitux · 2024-08-29T16:57:50Z

Thank you, @ntsekouras, for your valuable feedback! I've implemented your suggestion. However, the PR isn't ready for a full review yet, as I plan to explore the solution you proposed here. Currently, the UI/implementation of the generic image field control differs significantly from the control in the edit-site package.

One concern with your suggestion is that the existing mockup isn't adaptable for a generic file upload scenario:

The current mockup includes two labels:

The image name in the media gallery.
The filename.

For a generic file upload handler, only the filename would be available. As you suggested, I will explore of some kind of control config that is passed down, but as I mentioned in the Slack thread, I'm thinking if we we should work on a @wordpress/fields-control package

Sharing my thoughts here as well to help keep this discussion visible!

…image-control

gigitux · 2024-09-09T13:54:52Z

I'm going to mark this PR as ready to be reviewed. I'm going to update the description, but overall this PR introduces the Featured Image control following the @jameskoster feedback.

The remaining task is to truncate the filename based on the available width. Currently, truncation is performed using a fixed number of characters. Is it something that, is it needed?

In the future, this code may be moved to the @wordpress/core-fields-control package if we agree to create it.

github-actions · 2024-09-09T13:55:09Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: gigitux <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ntsekouras <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

jameskoster · 2024-09-10T09:38:18Z

The remaining task is to truncate the filename based on the available width. Currently, truncation is performed using a fixed number of characters. Is it something that, is it needed?

If this is too problematic we could probably omit the filename for now.

Look at the screenshot in your last comment it seems the radius is missing on the thumbnail and the container. We can use $radius-small for this.

gigitux · 2024-09-10T12:40:15Z

Thanks for the feedback!

If this is too problematic we could probably omit the filename for now.

It makes sense! Addressed with 05f0d1a.

Look at the screenshot in your last comment it seems the radius is missing on the thumbnail and the container. We can use $radius-small for this.

Good catch! Fixed with c4db3b9.

Screen.Capture.on.2024-09-10.at.14-36-47.mp4

oandregal · 2024-09-12T17:49:14Z

packages/edit-site/src/components/post-fields/index.js

 				label: __( 'Featured Image' ),
-				getValue: ( { item } ) => item.featured_media,
+				type: 'image',


What is this type for? This PR provides custom Edit and render functions and the type is not used anywhere I can see.

I see a few options:

Implement the image type for DataForm (with a demo in storybook), like any other types) we support. The advantage is that we can make type a required prop to fields. Then, we'd override the Edit control here to use WordPress-specifics.

Implement a custom feature-image type that is specific to WordPress, like the slug PR tries to do.

Do not provide any type and just override Edit & render. We'd still need to 1 at some point. It's fine if it's a follow-up.

This PR has been opened before @wordpress/fields package and the multiple great conversations that we had during these week. I think that it makes sense to follow the second option. I'm going to move this PR as draft, given that it will require some work before another round of review!

Thanks for the help! 🙇

…image-control

Page Edit View: Implement Featured image page field

785085b

youknowriad requested review from oandregal and jameskoster August 14, 2024 12:26

youknowriad added [Type] Experimental Experimental feature or API. [Feature] Data Views Work surrounding upgrading and evolving views in the site editor and beyond labels Aug 14, 2024

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

dd7e0a3

…image-control

gigitux mentioned this pull request Aug 14, 2024

[Data View - Detail Panel]: Site Editor - Page view: implements all the view/edit controls for the Page view #64519

Open

9 tasks

gigitux added 2 commits August 21, 2024 10:30

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

77f2217

…image-control

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

433e45f

…image-control

gigitux force-pushed the add/page-image-control branch 2 times, most recently from 2133ef7 to 0a2c977 Compare August 22, 2024 13:44

improve flow and style

f890963

fix list layout

c32622e

gigitux force-pushed the add/page-image-control branch from 0a2c977 to c32622e Compare August 22, 2024 14:23

improve design

9a39fe6

gigitux commented Aug 23, 2024

View reviewed changes

remove not necessary style

5419b0a

gigitux added 3 commits August 26, 2024 14:21

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

68ef300

…image-control

improve style

cd923f8

improve default image control

94335a4

gigitux added 7 commits August 29, 2024 15:11

fix style

baf7a82

remove not necessary configuration

4095dab

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

23d8695

…image-control

format _z-index.scss file

ec715ed

improve style

ea29690

remove not necessary code

106af4d

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

cc46724

…image-control

gigitux added 4 commits September 9, 2024 11:12

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

b11e923

…image-control

fix focus

c6dffd7

remove image field type

3c262d6

add comment

c053a9a

gigitux marked this pull request as ready for review September 9, 2024 13:54

gigitux requested a review from ntsekouras September 9, 2024 13:55

gigitux changed the title ~~[WIP] Data View - Post View: Add Featured Image Control~~ Data View - Post View: Add Featured Image Control Sep 9, 2024

fix warning

57faa8f

gigitux force-pushed the add/page-image-control branch from 3e948cc to 57faa8f Compare September 9, 2024 16:13

fix image for deleted pages

d2eeb0e

gigitux changed the title ~~Data View - Post View: Add Featured Image Control~~ Data View - Page View: Add Featured Image Control Sep 10, 2024

gigitux added 2 commits September 10, 2024 14:37

remove filename

05f0d1a

add border-radius

c4db3b9

oandregal reviewed Sep 12, 2024

View reviewed changes

gigitux marked this pull request as draft September 16, 2024 09:17

gigitux mentioned this pull request Sep 18, 2024

Data View - Page view: Add slug field control #65196

Open

gigitux added 2 commits September 18, 2024 12:48

Merge branch 'trunk' of github.com:WordPress/gutenberg into add/page-…

cd9fe2f

…image-control

migrate featured image to fields package

8356977

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Data View - Page View: Add Featured Image Control #64496

Data View - Page View: Add Featured Image Control #64496

gigitux commented Aug 14, 2024 •

edited

Loading

jameskoster commented Aug 15, 2024

gigitux commented Aug 16, 2024

gigitux commented Aug 22, 2024

jameskoster commented Aug 22, 2024

gigitux commented Aug 23, 2024

gigitux Aug 23, 2024

jameskoster Aug 23, 2024

gigitux Aug 23, 2024

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 •

edited

Loading

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 •

edited

Loading

gigitux commented Aug 29, 2024 •

edited

Loading

gigitux commented Sep 9, 2024

github-actions bot commented Sep 9, 2024

jameskoster commented Sep 10, 2024

gigitux commented Sep 10, 2024

oandregal Sep 12, 2024 •

edited

Loading

gigitux Sep 16, 2024

	[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
	item.status !== 'trash';

Data View - Page View: Add Featured Image Control #64496

Are you sure you want to change the base?

Data View - Page View: Add Featured Image Control #64496

Conversation

gigitux commented Aug 14, 2024 • edited Loading

What?

View mode

Edit

Additional Changes

Render component and view props

Fix error on bulk edit mode

Attachment type

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

jameskoster commented Aug 15, 2024

gigitux commented Aug 16, 2024

gigitux commented Aug 22, 2024

jameskoster commented Aug 22, 2024

gigitux commented Aug 23, 2024

gigitux Aug 23, 2024

Choose a reason for hiding this comment

jameskoster Aug 23, 2024

Choose a reason for hiding this comment

gigitux Aug 23, 2024

Choose a reason for hiding this comment

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 • edited Loading

jameskoster commented Aug 23, 2024

gigitux commented Aug 23, 2024 • edited Loading

gigitux commented Aug 29, 2024 • edited Loading

gigitux commented Sep 9, 2024

github-actions bot commented Sep 9, 2024

jameskoster commented Sep 10, 2024

gigitux commented Sep 10, 2024

oandregal Sep 12, 2024 • edited Loading

Choose a reason for hiding this comment

gigitux Sep 16, 2024

Choose a reason for hiding this comment

gigitux commented Aug 14, 2024 •

edited

Loading

gigitux commented Aug 23, 2024 •

edited

Loading

gigitux commented Aug 23, 2024 •

edited

Loading

gigitux commented Aug 29, 2024 •

edited

Loading

oandregal Sep 12, 2024 •

edited

Loading