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

Site editor: 🥝 Media library proof of concept 🥝 #53788

Closed
wants to merge 90 commits into from

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Aug 17, 2023

This is an experiment only 🚧 Do not merge

2023-08-20.17.42.15.mp4

Stuff

  • Media sidebar item and main page
  • Fetching attachment records
  • Saving records after crop: need to generate proper WP media object with thumbnail sizes etc.

ramonjd and others added 3 commits August 18, 2023 11:45
- media sidebar item and main page
- fetching attachment records
@github-actions
Copy link

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files
❔ lib/experimental/media-library.php
❔ lib/load.php

@github-actions
Copy link

github-actions bot commented Aug 17, 2023

Size Change: +47.6 kB (+3%)

Total Size: 1.56 MB

Filename Size Change
build/block-editor/index.min.js 213 kB -15 B (0%)
build/components/index.min.js 245 kB -89 B (0%)
build/compose/index.min.js 12.1 kB +21 B (0%)
build/core-commands/index.min.js 2.72 kB +139 B (+5%) 🔍
build/core-data/index.min.js 16.8 kB +20 B (0%)
build/customize-widgets/index.min.js 12.1 kB +3 B (0%)
build/edit-post/index.min.js 35.4 kB -39 B (0%)
build/edit-site/index.min.js 135 kB +44.1 kB (+48%) 🚨
build/edit-site/style-rtl.css 14.9 kB +1.71 kB (+13%) ⚠️
build/edit-site/style.css 14.9 kB +1.71 kB (+13%) ⚠️
build/edit-widgets/index.min.js 16.9 kB +2 B (0%)
build/editor/index.min.js 45.5 kB +29 B (0%)
build/format-library/index.min.js 7.55 kB -3 B (0%)
build/warning/index.min.js 249 B -19 B (-7%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.28 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 7.01 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.26 kB
build/block-editor/content.css 4.25 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/style-rtl.css 15 kB
build/block-editor/style.css 15 kB
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 90 B
build/block-library/blocks/archives/style.css 90 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 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 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 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 629 B
build/block-library/blocks/button/style.css 628 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 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 421 B
build/block-library/blocks/columns/style.css 421 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-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 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-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.63 kB
build/block-library/blocks/cover/style.css 1.62 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
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 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view-interactivity.min.js 317 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 654 B
build/block-library/blocks/group/editor.css 654 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.42 kB
build/block-library/blocks/image/style.css 1.41 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/image/view-interactivity.min.js 1.83 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 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 505 B
build/block-library/blocks/media-text/style.css 503 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.23 kB
build/block-library/blocks/navigation/style.css 2.22 kB
build/block-library/blocks/navigation/view-interactivity.min.js 988 B
build/block-library/blocks/navigation/view-modal.min.js 2.85 kB
build/block-library/blocks/navigation/view.min.js 469 B
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 401 B
build/block-library/blocks/page-list/editor.css 401 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/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 314 B
build/block-library/blocks/post-template/style.css 314 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 302 B
build/block-library/blocks/query-pagination/style.css 299 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 607 B
build/block-library/blocks/search/style.css 607 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 631 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.44 kB
build/block-library/blocks/social-links/style.css 1.43 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 432 B
build/block-library/blocks/table/editor.css 432 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.1 kB
build/block-library/editor.css 12.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 203 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.8 kB
build/block-library/style.css 13.8 kB
build/block-library/theme-rtl.css 688 B
build/block-library/theme.css 693 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.2 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 932 B
build/commands/style.css 929 B
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.38 kB
build/date/index.min.js 17.8 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.64 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/style-rtl.css 7.62 kB
build/edit-post/style.css 7.62 kB
build/edit-widgets/style-rtl.css 4.52 kB
build/edit-widgets/style.css 4.52 kB
build/editor/style-rtl.css 3.53 kB
build/editor/style.css 3.52 kB
build/element/index.min.js 4.82 kB
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/index.min.js 10.4 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.87 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.99 kB
build/nux/style-rtl.css 735 B
build/nux/style.css 732 B
build/patterns/index.min.js 2.71 kB
build/patterns/style-rtl.css 240 B
build/patterns/style.css 240 B
build/plugins/index.min.js 1.79 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 958 B
build/react-i18n/index.min.js 615 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.7 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.85 kB
build/sync/index.min.js 53.8 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.73 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 958 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@ramonjd ramonjd added [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Status] In Progress Tracking issues with work in progress [Type] Experimental Experimental feature or API. labels Aug 18, 2023
@SaxonF
Copy link
Contributor

SaxonF commented Aug 27, 2023

I think this very issue came up during implementation with the observation that many components needed a fair squirt of CSS love to conform to "dark mode"

That's correct. We have an issue on colours here and explorations are underway around how to make use of the existing theme component in wordpress/components.

What we are working towards.

image

image

If we do move forward with tags as the organisational paradigm than we'll probably want to emphasise them more (e.g. move out of dropdown and in to sidebar or similar)

@ramonjd ramonjd changed the title Site editor: 🥝 Media library 🥝 Site editor: 🥝 Media library proof of concept 🥝 Aug 28, 2023
@SaxonF SaxonF mentioned this pull request Aug 28, 2023
16 tasks
@paaljoachim
Copy link
Contributor

When I see the left sidebar Images, Video, Audio and Documents I just want to create subfolders below as if it was a submenu in the Navigation menu.

Example adding images into a structural approach. Using folders as if these were categories. Then being able to also add tags. Using the standard post approach. Top level broad stroke with categories and going into details with tags.

Images
-Vacation
--Italy
---Rome
---Venice

@SaxonF
Copy link
Contributor

SaxonF commented Aug 29, 2023

@paaljoachim you might want an image and a video to be in the same category/tag. An alternative is to show categories/tags in sidebar (like you suggest) with media type a filter in the page instead.

@priethor priethor added the Needs Accessibility Feedback Need input from accessibility label Sep 11, 2023
@jeffgolenski
Copy link

Great work, y'all! @ramonjd @jasmussen @SaxonF

  • For image display, will core also show photo EXIF data as well? In the very least seeing DPI would be great to help monitor image performance.
  • For image editing: Is there any discussion about more advanced cropping functionality? Particularly around creating ratios?

Thanks!

@ramonjd
Copy link
Member Author

ramonjd commented Sep 12, 2023

Thanks for the questions @jeffgolenski!

For image display, will core also show photo EXIF data as well? In the very least seeing DPI would be great to help monitor image performance.

I believe showing image metadata came up in discussions, and we all agreed it would be a good idea. 😄 So I believe the answer is a tentative "yes", at least it's on the wish list.

For image editing: Is there any discussion about more advanced cropping functionality? Particularly around creating ratios?

The image editing was thrown in as an afterthought so I couldn't give you a straight answer on that.

The library I plucked out of the internet can handle it, though there remains the task of fully investigating the backend image manipulation already in Core.

I think the benchmark, in terms of functionality, would be to offer what Core does already with the intention to build it out further.

👍🏻

@ramonjd ramonjd removed the Needs Accessibility Feedback Need input from accessibility label Sep 13, 2023
@bahia0019
Copy link

Hello all.
I'm really glad I finally found this discussion.
I've been bothering people in the Make Core Media slack channel for weeks trying to find out who and where this project is being discussed.

So first and foremost before I start adding some feedback to the project:
Why is this project being discussed on a random Github ticket in relative obscurity? Why wasn't this discussion started with the involvement of the Core Media team? They would be the ones to provide enough background and expertise for the decisions that will have to be made for this project to move forward. I suggest moving this conversation there so the other people that want to contribute may have a chance to.
Ever since Matias announced this proposal, I have wanted to be involved, yet there was not even a hint for where I can do so.
I am going to be very frank, it's disconcerting and frustrating that a project of this magnitude has been kept hidden from other contributors.

I only recognize Paal's name in this thread, so allow me to introduce myself.
My name is William Bay, and I'm a professional photographer, and have been building custom sites for professional photographers on WordPress for 15 years. But I've also been building websites since 97. I've been photographing for over 30 years. Before WordPress, I built my own photography websites with Fireworks and Dreamweaver.
So I have a tremendous amount of experience when it comes to displaying and organizing media on websites.
I've been wanting to replace the Media Library for many years now. I have made multiple mocks, and have even started building rough working models in vanilla JS, and then React.
I think with my expertise in the areas, I can provide some valuable insight.

Feedback:
I know there isn't much to look at based on the mockups. But my initial thoughts are that it looks like you're not creating anything new, but merely reskinning what we have (with a couple new features).

What I'm here for is to completely overhaul the Media Library. If you look at the comments in Matias's proposal people aren't asking for a new skin to the old Media Library, they're essentially asking for Digital Asset Manager (DAM). This is something that needs to be addressed from the ground up.
It needs to:

  • Handle EXIF and IPTC for Keywords, Captions, Camera data, Geo data etc.
  • Incorporate advanced filtering, sorting and search.
  • Ability to add/edit Keywords and ranking features (stars, colors, flags).
  • Custom taxonomies, or nameable virtual buckets (something that would resemble "folders" as there are people that want that).
  • Copyright and Usage rights management.
  • Duplicate handling

If you've used Lightroom, or Bridge, or Capture One, or an agency level DAM, you'll recognize why we're asking for these.
These features are important because Photographers and Publishing sites currently find the Media Library almost unusable.
Can you imagine running a large online newspaper website and a staff writer not being able to find a photo they used in an article two weeks ago? They can't find it because the filtering sucks, there's no way to look up the photographer, or keywords, etc...
So the improvements we're asking for isn't just a personal nice to have, these improvements are vital to WordPress continuing to be a force in the publishing world.

Here's a screenshot of the Library in Lightroom for reference:
Screenshot 2023-10-06 at 5 27 08 PM

And I created some mockups a few years back as a place to start when I started building some proof of concepts in JS. Mind you this was before Gutenberg, and before the editor style changing. So the design aesthetic is rather dated, but the basic ideas of something more like a DAM are there.

Web 1920 – 1
Web 1920 – 2
Web 1920 – 3
Web 1920 – 5

It's important to note these aren't what I would build now. But there are some bones in these mockups that are important.

Also, I think it's imperative to have buy in, and understand the need for these changes.
We need to think of this as an opportunity for a total overhaul of the Media Library. Something that will be the foundation for the next 10 years or more.
Additionally, I feel strongly that conversations going forward should be handled in the Core Media channel on Slack. That is what the channel is for. They currently meet Wednesdays at 8am Pacific.
But I would maybe suggest a different meeting time for the new Media Library discussions, as the current meeting revolves around bug fixes and open tickets in TRAC.

I know I'm walking in here like a bull into a china shop. So I understand if it's off-putting. Just know that my intentions are all about making a product that I can be proud to use when I open up my photography site and add a new post with my photos, or when an agency publishes an article and they can easily find a picture one of their staff photographers took 5 years ago with just a couple clicks.

Feel free to @ me here, or find me on Twitter @WilliamBay. I'm happy to discuss anything in greater depth, and help move this project forward.

@patric-boehner
Copy link
Contributor

I worry about adding the media library to the site editor for what it's worth. It feels out of place and hard to access. Keeping the media library as its top-level content type might be better. Media assets are more like post types than they are like design elements ( templates, template parts, patterns ). Especially if we finely add better controls that allow for organizing and filtering.

I like some of the latter mockups. They look good. The secondary controls for accessing the media details or editing those details, cropping, and previewing video/audio, would be handled in a separate settings panel, similar to the content editor for block settings. Switching back and forth on the left-hand menu is tiring and time-consuming.

@SaxonF
Copy link
Contributor

SaxonF commented Oct 9, 2023

@bahia0019 great feedback! Definitely agree this needs more thought and wider input. This is simply a POC that shows how a media library could work using @wordpress/components and some of the existing patterns in the site editor (e.g. patterns page) so please consider it just that, a POC. The site editor just gave us a space to build that POC. We do have to consider the future of admin in this work though and the site editor offers a glimpse of that.

Would the Core Media team like to create a GH overview issue for a redesign media library? Slack will be great for synchronous discussions etc but for folks who are in different timezones or not part of Slack GH can be more accessible and its connected with other related projects. The overview issue will be a great place to highlight existing pain points and opportunities we've observed and gives us a space to explore different solutions.

One other note is that we will want to make use of the work being done in list views which includes complex filtering, different view types (list, grid), quick editing, saved views etc

@ramonjd
Copy link
Member Author

ramonjd commented Oct 9, 2023

Good to have these ideas, thanks, folks!

Would the Core Media team like to create a GH overview issue for a redesign media library? Slack will be great for synchronous discussions etc but for folks who are in different timezones or not part of Slack GH can be more accessible and its connected with other related projects. The overview issue will be a great place to highlight existing pain points and opportunities we've observed and gives us a space to explore different solutions.

Agree, thanks @SaxonF

Maybe we're just missing a tracking issue, however, for what it's worth the development side of the project hasn't — as far as I'm aware —been started in any capacity.

Still, when an over-arching issue does arise we could use what's been documented here as reference.

Keeping the media library as its top-level content type might be better. Media assets are more like post types than they are like design elements ( templates, template parts, patterns ). Especially if we finely add better controls that allow for organizing and filtering.

For sure. I'm thinking it might be part of the evolution of the admin experience, brought up in https://make.wordpress.org/core/2023/07/12/admin-design/

So however the media library is implemented for the editor, there'd be shared components and view a the "top level".

@ramonjd
Copy link
Member Author

ramonjd commented Oct 9, 2023

I'm going to close this branch. Happy to continue the discussion here for the record until there's a better place. 🙇🏻

@ramonjd ramonjd closed this Oct 9, 2023
@ramonjd ramonjd deleted the try/site-editor-media-library-bonanza branch October 9, 2023 01:54
@bahia0019
Copy link

@bahia0019 great feedback! Definitely agree this needs more thought and wider input. This is simply a POC that shows how a media library could work using @wordpress/components and some of the existing patterns in the site editor (e.g. patterns page) so please consider it just that, a POC. The site editor just gave us a space to build that POC. We do have to consider the future of admin in this work though and the site editor offers a glimpse of that.

Yeah, I kinda figured you were using the Site Editor to cherry pick on use the native components and UI stuff. That makes sense.
And, yeah. Lots to consider for sure. This is going to be a big project with a ton of moving parts and components.
To @patric-boehner 's point the Media Library itself will likely be separate from, the Insert Media frame in the left sidebar, the modals for the Image, Video, Audio and Gallery blocks, and the Featured Image modal too. So, lots of decisions will need to be made.

I think a running proof of concept or a plugin which we can all install and play with is great. I have some stuff I've done for grid view I've worked on already I can contribute. Whether that stays here, or moves I really don't mind.
I don't have much going on this week, so I'm happy to team up and work on this wherever we want to put it.

Would the Core Media team like to create a GH overview issue for a redesign media library? Slack will be great for synchronous discussions etc but for folks who are in different timezones or not part of Slack GH can be more accessible and its connected with other related projects. The overview issue will be a great place to highlight existing pain points and opportunities we've observed and gives us a space to explore different solutions.

I'm not sure the best way to approach a large project like this in the WordPress workflow. I come from agency work where my PM handled all that. But a dedicated Github project where we can create tickets for all the features isn't a bad idea. Again, not sure where it fits in with the WordPress feature workflow. Perhaps some people in in the Slack channel are smarter than I am in that regard.

I'm excited, and looking forward to making something cool with y'all.

@bahia0019
Copy link

@ramonjd and @SaxonF
Can we start a little committee with the three of us, and figure out the most appropriate venue to start discussing and laying out the requirements for the project?

If we want to think about having any meetings, I'm US Pacific time, and unemployed (I'll start looking for work at the start of the new year), so my time is super flexible right now.

@ramonjd
Copy link
Member Author

ramonjd commented Oct 9, 2023

It'd be great to keep some momentum going, thanks for lighting the fire @bahia0019

I think we could rather keen the discussion open so that we garner as much feedback and ideas as possible.

My idea would be to create a tracking issue that records your and others' ideas in https://make.wordpress.org/core/2023/07/07/media-library/, and center the enterprise around it. I think it'd be a good resource to have for planning and production, particularly if we break down tasks.

This will be a big project (and an important one!) I expect, so design input and initial development will take time.

It may not seem like things are moving, but some of the underlying components that this proof of concept PR experimented with are already being worked on, e.g., the sortable data table view: #55083

@spencerfinnell
Copy link

@ramonjd you may be interested in #55174 -- discussion around collecting feedback for experimental features.

In my opinion something like what the Interactivity API is using makes sense: https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api

@ramonjd
Copy link
Member Author

ramonjd commented Oct 11, 2023

I've opened a rough tracking issue over here:

I expect we can open some high level discussion threads once the scope is refined.

Cheers!

@padams
Copy link

padams commented Mar 21, 2024

If you are looking for feedback... it's important to allow the user to create image taxonomies and map those to the meta-data contained in the files they upload whether that data is in exit, IPTC or XMP or else filtering will always fall short.

You can see an example of how this could work here:

https://github.com/photopress-dev/photopress-plugin

If it's not easy to create custom taxonomies (or have them automatically created!) from embedded meta-data then filtering and searching the media library will come up short for users that need more and more elaborate filters as their media library grows...

This is the core issue with the media library IMHO.

@ramonjd
Copy link
Member Author

ramonjd commented Mar 21, 2024

create custom taxonomies (or have them automatically created!) from embedded meta-data

Thanks! I've added a note on the tracking issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress [Type] Experimental Experimental feature or API. [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Development

Successfully merging this pull request may close these issues.