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

Post Editor: Update publish flow #60456

Merged
merged 3 commits into from Apr 17, 2024
Merged

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Apr 4, 2024

What?

Part of: #59878

This PR aims to update the publishing flow in post editor, so we can later unify it with site editor.

Tasks

  1. Update the post status component design and use it in post editor
Panel Post status label
Panels status

From the above designs I'm not sure we can add another control(publish date) in between the radio control options. --cc @jameskoster @mirka

  1. Update publish button
  • Match save label and save panel when multiple entities have changed
  • handle pending status/button
  • handle switch to draft status/button properly
  • remove visibility panel

Testing Instructions

Testing should be thorough including any possible flow. Examples:

  1. Make changes in a post by updating the status directly from the panel, like from published to draft, etc..
  2. Do the same as above with other content changes and other entities' changes
  3. Make changes to a draft or pending post and use save as draft or save as pending buttons in combination with other changes and changes in other entities.
  4. Do the same as above and use the main save/publish button
  5. Make changes only to other entities(pattern) and save either to that page or by returning to the post editor of the main entity(page).
  6. I guess other flows that I'm missing too..

@ntsekouras ntsekouras added [Type] Enhancement A suggestion for improvement. [Package] Edit Post /packages/edit-post labels Apr 4, 2024
@ntsekouras ntsekouras self-assigned this Apr 4, 2024
Copy link

github-actions bot commented Apr 4, 2024

Size Change: -3.64 kB (0%)

Total Size: 1.75 MB

Filename Size Change
build/block-library/index.min.js 218 kB -39 B (0%)
build/components/index.min.js 222 kB -6 B (0%)
build/components/style-rtl.css 11.9 kB +30 B (0%)
build/components/style.css 11.9 kB +34 B (0%)
build/edit-post/index.min.js 19.7 kB -4.17 kB (-17%) 👏
build/edit-post/style-rtl.css 4.44 kB -1.06 kB (-19%) 👏
build/edit-post/style.css 4.44 kB -1.06 kB (-19%) 👏
build/edit-site/index.min.js 227 kB -3.47 kB (-2%)
build/edit-site/style-rtl.css 14.1 kB -989 B (-7%)
build/edit-site/style.css 14.1 kB -988 B (-7%)
build/editor/index.min.js 76.1 kB +5.56 kB (+8%) 🔍
build/editor/style-rtl.css 6.74 kB +1.25 kB (+23%) 🚨
build/editor/style.css 6.74 kB +1.26 kB (+23%) 🚨
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.27 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.5 kB
build/block-editor/content.css 4.5 kB
build/block-editor/default-editor-styles-rtl.css 395 B
build/block-editor/default-editor-styles.css 395 B
build/block-editor/index.min.js 256 kB
build/block-editor/style-rtl.css 15.6 kB
build/block-editor/style.css 15.6 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 133 B
build/block-library/blocks/audio/theme.css 133 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 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 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 671 B
build/block-library/blocks/cover/editor.css 674 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 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 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 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 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 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.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 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.72 kB
build/block-library/blocks/gallery/style.css 1.72 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 647 B
build/block-library/blocks/group/editor.css 647 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 189 B
build/block-library/blocks/heading/style.css 189 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 878 B
build/block-library/blocks/image/editor.css 878 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 133 B
build/block-library/blocks/image/theme.css 133 B
build/block-library/blocks/image/view.min.js 1.54 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 306 B
build/block-library/blocks/media-text/editor.css 305 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 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 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.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 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 377 B
build/block-library/blocks/page-list/editor.css 377 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 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 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 729 B
build/block-library/blocks/post-featured-image/editor.css 727 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 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 354 B
build/block-library/blocks/pullquote/style.css 353 B
build/block-library/blocks/pullquote/theme-rtl.css 174 B
build/block-library/blocks/pullquote/theme.css 174 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 288 B
build/block-library/blocks/query-pagination/style.css 284 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 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 235 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 690 B
build/block-library/blocks/search/style.css 689 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 478 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 239 B
build/block-library/blocks/separator/style.css 239 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 801 B
build/block-library/blocks/site-logo/editor.css 801 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.48 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 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 395 B
build/block-library/blocks/table/editor.css 395 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 152 B
build/block-library/blocks/table/theme.css 152 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 431 B
build/block-library/blocks/template-part/editor.css 431 B
build/block-library/blocks/template-part/theme-rtl.css 107 B
build/block-library/blocks/template-part/theme.css 107 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 133 B
build/block-library/blocks/video/theme.css 133 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 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.4 kB
build/block-library/editor.css 12.4 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.8 kB
build/block-library/style.css 14.8 kB
build/block-library/theme-rtl.css 707 B
build/block-library/theme.css 713 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.6 kB
build/commands/index.min.js 15.2 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.5 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 9 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 579 B
build/edit-post/classic.css 579 B
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.16 kB
build/edit-widgets/style.css 4.16 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 493 B
build/format-library/style.css 492 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/debug.min.js 16.2 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 1.36 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.3 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 851 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.57 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.38 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.83 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10 kB
build/router/index.min.js 1.88 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.23 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@youknowriad
Copy link
Contributor

You've went a bit too far than I expected in this PR :) but it's fine. My thinking was that we could start by just using the "post status" panel from the site editor in the post editor and adapt the publish flow: (only allow publishing when draft and have a generic "save" button for all the other cases).

I think having this updated "post status" panel is fine but I don't think it works without also adapting the save buttons.

@youknowriad
Copy link
Contributor

How can I help you here? Should we start the review, wait?

@ntsekouras
Copy link
Contributor Author

You've went a bit too far than I expected in this PR :) but it's fine

You mean because of the mentioned tasks? Because the UI was mostly copied from site editor and adjusted..

How can I help you here? Should we start the review, wait?

Thank you and I might need some help with the update of the publish button. Let me make the first changes and I'll ping you if needed for help 😄

@jameskoster
Copy link
Contributor

Agree with Riad about the buttons.

From the above designs I'm not sure we can add another control(publish date) in between the radio control options

Probably fine to do that separately. There is an edge case quirk with draft/publish date though. If you edit a draft with a publish date in the past, when you switch the status to published the chip says "Published x ago". I suppose technically that's correct, but it's a bit unexpected:

date.mp4

If we're going to leave publish date as a separate field here, then the status chip should probably omit the publish time for now.

One other adjustment to make here: since it's possible to set the status to pending in the status popover, we can probably remove the 'Pending review' checkbox from the summary panel. Related: if it's not out of scope, I'd be tempted to move the 'Sticky' option for posts to the status popover too, this could add an icon to the chip like password protecting.

I'll push some style tweaks.

@ntsekouras
Copy link
Contributor Author

ntsekouras commented Apr 4, 2024

Agree with Riad about the buttons.

@jameskoster What do you mean?

@jameskoster
Copy link
Contributor

jameskoster commented Apr 4, 2024

The part about adapting the save buttons.

  • When status is draft, include "Save draft" and "Publish" button (triggers pre-publish panel)
  • When status is switched from draft to scheduled in the status popover, update "Publish" button label to "Schedule..."
  • When status is scheduled, pending, private, or published include a single "Save" button

One other observation; since visibility is managed in the status popover, we can remove the duplicative "Visibility" UI.

@mirka
Copy link
Member

mirka commented Apr 4, 2024

From the above designs I'm not sure we can add another control(publish date) in between the radio control options

Using the RadioControl component you mean? Unfortunately we can't even do the descriptions under each radio item 😅 For now you'll have to do it custom, like in the Post Visibility popover. You might even want to abstract it for internal reuse at this point 😅

We could add the radio item descriptions into the RadioControl API, but ultimately we want to replace RadioControl with a new composable RadioControlV2 component based on Ariakit so it will also support use cases like your extra input field.

@ntsekouras
Copy link
Contributor Author

I've pushed some updates and maybe it's time to start reviewing and testing.

Testing should be thorough including any possible flow. Examples:

  1. Make changes in a post by updating the status directly from the panel, like from published to draft, etc..
  2. Do the same as above with other content changes and other entities' changes
  3. Make changes to a draft or pending post and use save as draft or save as pending buttons in combination with other changes and changes in other entities.
  4. Do the same as above and use the main save/publish button
  5. Make changes only to other entities(pattern) and save either to that page or by returning to the post editor of the main entity(page).
  6. I guess other flows that I'm missing too..

I'm having a hard time to follow through all the complexity we have in this flow and we should definitely try to simplify, but let's do in steps.

@ntsekouras
Copy link
Contributor Author

When status is scheduled, pending, private, or published include a single "Save" button

@jameskoster when we can schedule, we also show the publish panel. Don't we want to preserve the Schedule copy and the flow to open the publish panel?

@youknowriad
Copy link
Contributor

The first thing I noticed is that I don't see the "save draft" button when I start a new post and type some content. I think it should be there right?

@youknowriad
Copy link
Contributor

This is what the post status thing shows as well when I just started a post. I expect it to say "draft" I think (even if it's auto-draft at this point)

Screenshot 2024-04-05 at 12 18 16 PM

@youknowriad
Copy link
Contributor

When I edit the status to "pending" I see this
Screenshot 2024-04-05 at 12 19 18 PM

I think the "save as pending" is redundant and should be removed.

@youknowriad
Copy link
Contributor

When I change the "publish date" and I put something in the future, the status should also change to "schedule" and the "save draft" shouldn't be shown in this case.

Screenshot 2024-04-05 at 12 21 45 PM

@youknowriad
Copy link
Contributor

This is more of a design/accessibility feedback. I think it's better to move the "pill" to the right and add a "status" label (like the other rows in the summary panel) cc @jameskoster

Screenshot 2024-04-05 at 12 23 07 PM

@jameskoster
Copy link
Contributor

when we can schedule, we also show the publish panel. Don't we want to preserve the Schedule copy and the flow to open the publish panel?

We want to preserve the Schedule copy/flow while you're scheduling, IE once you switch the status to scheduled, or set a future publish date. Once the post is saved as scheduled I think the button can just read "Save".

It's basically the same as editing a published page – in this case the button can also read "Save".

If you edit a scheduled page and change the publish date to something in the past I suppose the status should update to "Published".

I think it's better to move the "pill" to the right and add a "status" label (like the other rows in the summary panel)

There might not be room to do that neatly once we include the date:

status

We could try other formats, but I'm not sure status needs a label – can't it be inferred from the value? "Draft", "Scheduled", "Published", etc are fairly intuitive.

@youknowriad
Copy link
Contributor

There might not be room to do that neatly once we include the date:

Do we really need the date there since the date is right under (where you can actually edit it)

@jameskoster
Copy link
Contributor

Since they're so closely related, the designs we've been working on seek to unify status, visibility, and publish date into a single experience. This follows the direction in the Site Editor. So publish date will be set in the status popover, and not appear directly in the list of meta (since it's already communicated in the status pill).

Screenshot 2024-04-05 at 14 09 07

@youknowriad
Copy link
Contributor

I won't argue more, I personally still prefer the clarity of separate things but I don't mind this direction too much.

@ntsekouras ntsekouras force-pushed the update/post-publish-flow-post-editor branch 2 times, most recently from d29a8e2 to 5bbc91c Compare April 15, 2024 14:51
@ntsekouras ntsekouras marked this pull request as ready for review April 15, 2024 14:53
Copy link

github-actions bot commented Apr 15, 2024

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: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

@ntsekouras ntsekouras force-pushed the update/post-publish-flow-post-editor branch from bc43c0e to 52536a6 Compare April 16, 2024 07:45
@ntsekouras ntsekouras changed the title WIP: Post Editor: Update publish flow Post Editor: Update publish flow Apr 16, 2024
@ntsekouras
Copy link
Contributor Author

I think this is ready for final testing and review. Thanks!

Here's another bug that I discovered: When clicking a date in the future, the status correctly shows "scheduled" but when choosing a date in the past, the status doesn't show "draft" (or "publish" or whatever the status is currently), it keeps saying "scheduled". It seems changing the date shouldn't actually change the status automatically in the "state/edits", but the visible status should take into consideration the date instead maybe.

Since I removed the effect to update the status, the publish button label is affected only on some cases('schedule/publish'), but the chip with the current status remains the same.

@youknowriad
Copy link
Contributor

So there's a question about whether the "chip" text should update (without actually updating the status) to say "scheduled" if you set the date in the future (for a published post) and whether it should say "published" (for a scheduled post) when you set a date in the past.

That said, it doesn't really feel like a bug, it's more of a choice to make and the choice of showing the status that is actually "set" doesn't bother me either.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

I like this a lot, it simplifies the publish flow IMO. That said, it does require more scrutiny since it's a critical UI. So I'd appreciate more testing as well.

@jameskoster
Copy link
Contributor

A slight quirk in the flow; if you edit a draft, switch the status to pending, the primary button becomes "Save". Shouldn't that button remain "Publish", and the "Save as pending" button become active? The same is true for the inverse (edit a pending page and switch to draft).

@jameskoster
Copy link
Contributor

Pushed some chip styling adjustments.

@jameskoster
Copy link
Contributor

A couple other issues...

When you create a fresh draft, no status is selected in the popover:

Screenshot 2024-04-16 at 15 34 55

When you edit a draft, the publish date is 'Immediately', if you then switch status to scheduled the publish date is automatically set to one week in the future. This is good. However, the publish date behavior when switching from scheduled to another status is a bit strange.

  • Switching to draft or published—publish date changes to now, but the date reads as the full timestamp.
  • Switching to pending or private—publish date remains one week in the future

I think in all cases, when switching from scheduled to any other status publish date should change to now, and the button should read "Immediately".

The exception is when you're editing an already-published post. In this case, if you switch to scheduled then to another status, then the publish date should be restored to the original publish date.

Copy link

Flaky tests detected in 2ecb498.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8707463653
📝 Reported issues:

@ntsekouras
Copy link
Contributor Author

@jameskoster I addressed the following:

When you create a fresh draft, no status is selected in the popover:

I think in all cases, when switching from scheduled to any other status publish date should change to now, and the button should read "Immediately".

I haven't addressed:

The exception is when you're editing an already-published post. In this case, if you switch to scheduled then to another status, then the publish date should be restored to the original publish date.

In general is not great that we update attributes in different controls and probably is better to explore this in the follow ups with the data control inside post status dialog. The PR is already big enough the same issue is on trunk with the date.

You can test by having a scheduled post(future date) and from visibility change to private. The date remains the same.

@ntsekouras
Copy link
Contributor Author

ntsekouras commented Apr 16, 2024

A slight quirk in the flow; if you edit a draft, switch the status to pending, the primary button becomes "Save". Shouldn't that button remain "Publish", and the "Save as pending" button become active? The same is true for the inverse (edit a pending page and switch to draft).

I missed that..

I had updated based on this: #60456 (comment) and the above comment. So when we update the status from the dialog after we save, then the save draft/save as pending buttons render again. Is this something you have strong opinion about?

Additionally now that we can manually update the status, if we do update it I find the flows of having two buttons too confusing to be honest.

@jameskoster
Copy link
Contributor

Thanks, it's getting close, and may indeed be merge-able.

So when we update the status from the dialog after we save, then the save draft/save as pending buttons render again. Is this something you have strong opinion about?

It's not a super strong opinion, and tbh it's such a niche flow that it may not really matter. But it's basically a question of consistency. Since draft and pending statuses are both unpublished, I'd expect the button configuration to be the same.

pending.mp4

In the video above, it's a little strange to me that I have to save after switching to pending before I can publish.

If it'd add a lot to the PR to adjust this, I'd be fine with exploring it separately. Like I said, it's fairly niche and what we have isn't a big problem.

@youknowriad
Copy link
Contributor

Agree with @jameskoster it's a better to be consistent between "drafts" and "pending" but I also agree that it could be done separately.

@ntsekouras
Copy link
Contributor Author

So I'm going to land this and explore separately the draft/pending flow and other simplifications we can make. Thanks everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Edit Post /packages/edit-post [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants