Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Document Settings]: Add summary panel version 1 #39973

Merged
merged 17 commits into from
Apr 6, 2022

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Apr 1, 2022

Part of: #39082

This PR intends to add a fist iteration of post summary panel in inspector controls. The new post summary panel will include Featured Image, post title, excerpt and author. All of the controls except post title which didn't exist before in inspector controls were removed from their previous positions/panels.

Notes

  1. Previously post excerpt and featured image would live in their own panel and their visibility was also controlled by the preferences -> panels section. I have not removed the preferences, and we display these conditionally on the new panel, based on these preferences.
  2. Do you think there is a risk of breaking backwards compatibility by removing the Panels in edit-post package for the above(excerpt and featured image)? I think not because they are not exposed anywhere as I could see..
  3. In the exported PostFeaturedImage component from editor package two wrappers have been added. Do you think this can break backwards compatibility by maybe some third party targeting internal elements with selectors or something similar? 🤔

@ntsekouras ntsekouras added [Type] Enhancement A suggestion for improvement. [Feature] Document Settings Document settings experience labels Apr 1, 2022
@ntsekouras ntsekouras self-assigned this Apr 1, 2022
@github-actions
Copy link

github-actions bot commented Apr 1, 2022

Size Change: +2.3 kB (0%)

Total Size: 1.22 MB

Filename Size Change
build/block-editor/index.min.js 149 kB +80 B (0%)
build/block-editor/style-rtl.css 15.4 kB +45 B (0%)
build/block-editor/style.css 15.4 kB +47 B (0%)
build/block-library/blocks/group/editor-rtl.css 333 B +174 B (+109%) 🆘
build/block-library/blocks/group/editor.css 333 B +174 B (+109%) 🆘
build/block-library/blocks/navigation-link/style-rtl.css 115 B +21 B (+22%) 🚨
build/block-library/blocks/navigation-link/style.css 115 B +21 B (+22%) 🚨
build/block-library/editor-rtl.css 10.1 kB +108 B (+1%)
build/block-library/editor.css 10.1 kB +108 B (+1%)
build/block-library/index.min.js 174 kB +277 B (0%)
build/block-library/style-rtl.css 11.3 kB +13 B (0%)
build/block-library/style.css 11.3 kB +12 B (0%)
build/blocks/index.min.js 46.9 kB +25 B (0%)
build/components/index.min.js 223 kB +353 B (0%)
build/data/index.min.js 8.64 kB -8 B (0%)
build/edit-post/index.min.js 29.7 kB +87 B (0%)
build/edit-post/style-rtl.css 7.1 kB +39 B (+1%)
build/edit-post/style.css 7.1 kB +40 B (+1%)
build/edit-site/index.min.js 46.7 kB +68 B (0%)
build/edit-site/style-rtl.css 7.75 kB +15 B (0%)
build/edit-site/style.css 7.73 kB +15 B (0%)
build/editor/index.min.js 38.7 kB +304 B (+1%)
build/editor/style-rtl.css 3.86 kB +145 B (+4%)
build/editor/style.css 3.86 kB +150 B (+4%)
build/reusable-blocks/index.min.js 2.24 kB -12 B (-1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.49 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.56 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 447 B
build/block-library/blocks/latest-posts/style.css 446 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 708 B
build/block-library/blocks/navigation-link/editor.css 706 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view.min.js 2.85 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 323 B
build/block-library/blocks/post-template/style.css 323 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 370 B
build/block-library/blocks/pullquote/style.css 370 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 140 B
build/block-library/blocks/separator/editor.css 140 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 934 B
build/block-library/common.css 932 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/components/style-rtl.css 14.9 kB
build/components/style.css 14.9 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.04 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.39 kB
build/element/index.min.js 4.29 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 B
build/react-i18n/index.min.js 704 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@jasmussen
Copy link
Contributor

jasmussen commented Apr 1, 2022

Alright, based on work by @javierarce I've pushed some changes, and I think we're fast approaching something. Here's what it looks like now:

status

Not bad for just a little work!

Thoughts:

  • What is necessary for us to retire the separate Excerpt and Featured Image panels?
  • How about the components (right now with big warnings in the code we are using 2 just for testing, but what's actually needed?)
  • Same with the "Author" dropdown which exists inside Status & visibility, maybe we can remove it there now?
  • Right now we are loading a TINY thumbnail image into the featured image placeholder. Can we load a bigger source? Does it have to be inside a responsive wrapper? (I think I'll take a stab at removing it, see what happens there, that would also allow us to let it go edge to edge).
  • The author dropdown needs a little love to be simplified. What are our options here? It might be simplest to keep it a dropdown for now, since there's some specialized behavior here, but are there any visual properties we can leverage, such as isSmall or otherwise?
  • The PostTitle component in the sidebar just working is 👌 — but unfortunately it can't be a h1. In fact I think it needs to be either a h3 or a p or div, so as to not mess with the hierarchy. We'll want to apply some custom size styles to it regardless.
  • As noted in the code, there's a lot of junk we can remove if we replace the existing featured image and excerpt components instead of copying them.

I'll dive in, but even just as is, this is feeling sweet to me. What do you think, Javi? And thank you Nik for the boost here, looking forward to your thoughts.

@jasmussen
Copy link
Contributor

It looks like we can remove the ResponsiveWrapper and load a higher res featured image version:
Screenshot 2022-04-01 at 14 25 49

I haven't pushed that code because I'm not quite sure what it was there for. @ntsekouras any thoughts?

@ntsekouras
Copy link
Contributor Author

Just some early notes..

What is necessary for us to retire the separate Excerpt and Featured Image panels?

This is might not be needed depending on the changes we are going to make and if we want to apply these to the existing ones. For Excerpt I think this won't be the case, but for Featured Image might be, especially if we only change the remove/replace buttons.

Same with the "Author" dropdown which exists inside Status & visibility, maybe we can remove it there now?

Noting that the Author component changes from select to combobox depending on the number of users. A quick way to test this is by changing this value, although the label will not be at the side for this one..

It looks like we can remove the ResponsiveWrapper and load a higher res featured image version:

I'll have to check the code better for this one.

@javierarce
Copy link
Contributor

@jasmussen I just took it for a spin it's working great! Very promising!

@jasmussen
Copy link
Contributor

This is might not be needed depending on the changes we are going to make and if we want to apply these to the existing ones. For Excerpt I think this won't be the case, but for Featured Image might be, especially if we only change the remove/replace buttons.

Sounds good, yeah I think the changes made to featured image for this branch are worth it even for the existing component.

We could potentially change the excerpt version to "minimal-excerpt" or something like that. But I still think we should remove the panel from the sidebar once this is integrated.

Noting that the Author component changes from select to combobox depending on the number of users. A quick way to test this is by changing this value, although the label will not be at the side for this one..

Yes, we'll probably have to keep the dropdown mostly as is, potentially follow up separately. I meant, remove it from the Status & visibility panel so that it isn't duplicated at least.

@jameskoster
Copy link
Contributor

This is cool! :)

One quirk I noticed is how the layout jumps when the featured image loads in. Could we display a placeholder with a Spinner to make that a bit less jarring?

Also, perhaps not something to do here, but would it make sense to put the permalink in the summary too?

@jasmussen
Copy link
Contributor

This could be a good place for the permalink, probably yes. But I'd like to see if we can land this one in the next day or two 😅

Agreed on the jump, I'm currently tinkering with a better thumbnail, let me see what I can do in terms of a base height.

@jasmussen
Copy link
Contributor

For reference to the conversation around why the featured image is wrapped in a ResponsiveWrapper, it appears to date back to this conversation and this PR:

The idea is that after the first of these finishes loading, we know the dimensions of the image and the space we expect it to consume, even before the image itself has finished loading.

So it seems that wrapper is intended to help cover the jumping issue. Let me see if that's still the best way, or if there's something else we can do.

@jasmussen
Copy link
Contributor

jasmussen commented Apr 4, 2022

Alright, I pushed some tweaks to the thumbnail handling. I ended up keeping the ResponsiveWrapper, as it did come with the benefit of not oversizing a small image, but still giving a max-width to a large image. I also set the desired size to large, with thumbnail as fallback, so there's a nice resolution when available. Current status:
status

I also fixed the spinner position:

Screenshot 2022-04-04 at 11 22 08

The issue that Jay reported is one I could use advice on how to fix. Essentially this is the markup when the panel is fully loaded:
Screenshot 2022-04-04 at 11 41 11
But this is the markup while it's still loading:
Screenshot 2022-04-04 at 11 41 40

As you can see, the entire editor-post-featured-image element is missing while the page is loading. I'm not entirely sure why that is. It would be a nice bonus to fix this issue, but since it's only on initial load, and is an existing problem with the featured image panel, I think it could be a nice bugfix to follow up on.

So in terms of next steps, here's the todo list:

  • Rename PostExcerpt2 to something better, since it appears we'll want to keep two copies of this one. Right?
  • Remove PostFeaturedImage and replace with this new version, which is an improvement to the existing component rather than something that needs to be separate.
  • Remove redundant code as part of that (see @todo's)
  • Remove the duplicate "Author" from Status & Visibility panel
  • Remove the duplicate Featured Image panel
  • Remove the duplicate Excerpt panel
  • PostTitle is hardcoded to output an H1, and it needs to be either a H3, P or a SPAN in the inspector. Can we add the element as a prop and send a SPAN in the inspector?

How does that sound, @ntsekouras? Do you think we could address and land those in the next couple of days?

@ntsekouras
Copy link
Contributor Author

How does that sound, @ntsekouras? Do you think we could address and land those in the next couple of days?

Thanks for all the work here @jasmussen. I'll start working on this right now so hopefully we'll be able to land the v1.

@ntsekouras ntsekouras force-pushed the try/post-summary-panel branch from 1f86576 to 8f4538d Compare April 4, 2022 12:01
@jasmussen
Copy link
Contributor

I think #38893 intended to fix it, but as it turns out it's non-trivial.

@jasmussen
Copy link
Contributor

Oh, and may we have a green check on the design side? 😇

@javierarce javierarce self-requested a review April 5, 2022 09:12
Copy link
Contributor

@javierarce javierarce left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, and may we have a green check on the design side? 😇

Yes! 🚀

@jasmussen
Copy link
Contributor

@Mamaduka is there any chance I could get your eyes and instincts on this one?

I'd love to land it, ideally soon, as I think there's a big benefit to it. It works well, and if we run into anything, a revert is always an option.

@Mamaduka Mamaduka self-requested a review April 5, 2022 10:52
@Mamaduka
Copy link
Member

Mamaduka commented Apr 5, 2022

Sure thing 👍 I am adding to my to-do list. I will try to review it today or tomorrow.

@jameskoster
Copy link
Contributor

Another quick thought on this one; should the excerpt wrapper have a max-height and scroll behaviour for overflows? I know excerpts by nature should be short, but short is relative.

@jasmussen
Copy link
Contributor

Another quick thought on this one; should the excerpt wrapper have a max-height and scroll behaviour for overflows? I know excerpts by nature should be short, but short is relative.

I think that can be a perfect followup PR perhaps?

@Mamaduka
Copy link
Member

Mamaduka commented Apr 5, 2022

The feature looks great. Excellent work 🥇

I noticed a few issues that we can address in follow-up PRs.

Upload spinner is displayed after a few seconds, and it's not clear that the Featured Image started uploading. Here's a screencast with Network throttling (Fast 3G); it's also visible with a normal connection.

CleanShot.2022-04-05.at.19.28.17.mp4

The title and author rows are missing post-type support checks. Also, what happens if post-type doesn't support any of these fields?

This CPT only supports the editor field.

CleanShot 2022-04-05 at 19 32 59

@jasmussen
Copy link
Contributor

Thanks a ton for the review. I'll let this sit overnight and then see if we can't press the button tomorrow and follow up on all your points.

@jasmussen
Copy link
Contributor

@ntsekouras would you mind if we land this one and look at followups? I think it's ready, and we'll have some time in beta to follow up on any bugs noted on this thread.

@ntsekouras ntsekouras added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Apr 6, 2022
@ntsekouras
Copy link
Contributor Author

The title and author rows are missing post-type support checks. Also, what happens if post-type doesn't support any of these fields?

Good points @Mamaduka! I added the checks and in the case of nothing supported, I think it's okay to look into it in a follow up.

@Mamaduka
Copy link
Member

Mamaduka commented Apr 6, 2022

Sounds good, Nik.

The feature image issue exists on the trunk as well. So it's not related to this PR, but it would be a good improvement.

@ntsekouras ntsekouras merged commit ae657f3 into trunk Apr 6, 2022
@ntsekouras ntsekouras deleted the try/post-summary-panel branch April 6, 2022 08:32
@github-actions github-actions bot added this to the Gutenberg 13.0 milestone Apr 6, 2022
ntsekouras added a commit that referenced this pull request Apr 7, 2022
ntsekouras added a commit that referenced this pull request Apr 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Document Settings Document settings experience Needs Dev Note Requires a developer note for a major WordPress release cycle [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants