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

Add the ability to create a new page in the Site Editor #50565

Merged
merged 23 commits into from
Jun 6, 2023
Merged

Conversation

SaxonF
Copy link
Contributor

@SaxonF SaxonF commented May 12, 2023

What?

As part of #44461 we are re-introducing a way to edit content within the site editor. Adding new content, such as pages, is an important part of that experience. This PR gives us a very basic starting experience to work from.

Why?

Resolves first iteration of #48456

How?

The AddNewPageModal sits above site view / editor and adds open state to store so that it can be called upon in different places (e.g. navigation block). In future this might be more appropriate as a package.

TODO: We'll want the command center "new page" command to make use of this modal as well.

Testing Instructions

  1. Open site editor
  2. Click on pages
  3. Click the + button
  4. Notice new page modal opens
  5. Give page a title and hit create
  6. You should be redirected to editor with new page loaded

Testing Instructions for Keyboard

Screenshots or screencast

new-page-demo.mp4

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 12, 2023
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @SaxonF! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@SaxonF SaxonF mentioned this pull request May 12, 2023
2 tasks
@github-actions
Copy link

github-actions bot commented May 12, 2023

Size Change: +4.84 kB (0%)

Total Size: 1.4 MB

Filename Size Change
build/block-editor/content-rtl.css 4.22 kB -14 B (0%)
build/block-editor/content.css 4.22 kB -13 B (0%)
build/block-editor/index.min.js 195 kB +333 B (0%)
build/block-editor/style-rtl.css 14.9 kB -15 B (0%)
build/block-editor/style.css 14.9 kB -14 B (0%)
build/block-library/blocks/navigation/editor-rtl.css 2.35 kB +22 B (+1%)
build/block-library/blocks/navigation/editor.css 2.36 kB +22 B (+1%)
build/block-library/blocks/post-template/style-rtl.css 314 B +33 B (+12%) ⚠️
build/block-library/blocks/post-template/style.css 314 B +33 B (+12%) ⚠️
build/block-library/blocks/search/style-rtl.css 587 B +153 B (+35%) 🚨
build/block-library/blocks/search/style.css 584 B +152 B (+35%) 🚨
build/block-library/editor-rtl.css 12.2 kB +29 B (0%)
build/block-library/editor.css 12.1 kB +31 B (0%)
build/block-library/index.min.js 201 kB +488 B (0%)
build/block-library/interactivity/runtime.min.js 2.71 kB +28 B (+1%)
build/block-library/style-rtl.css 13.2 kB +161 B (+1%)
build/block-library/style.css 13.2 kB +160 B (+1%)
build/commands/index.min.js 14.9 kB +10 B (0%)
build/components/index.min.js 231 kB +297 B (0%)
build/components/style-rtl.css 11.8 kB +93 B (+1%)
build/components/style.css 11.8 kB +98 B (+1%)
build/data/index.min.js 8.23 kB -6 B (0%)
build/edit-post/index.min.js 33.9 kB +40 B (0%)
build/edit-site/index.min.js 67.5 kB +2.04 kB (+3%)
build/edit-site/style-rtl.css 11.2 kB +333 B (+3%)
build/edit-site/style.css 11.2 kB +336 B (+3%)
build/editor/index.min.js 44.7 kB +5 B (0%)
build/preferences/index.min.js 1.24 kB +1 B (0%)
ℹ️ 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.05 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 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 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 91 B
build/block-library/blocks/avatar/style.css 91 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 624 B
build/block-library/blocks/button/style.css 623 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 409 B
build/block-library/blocks/columns/style.css 409 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.61 kB
build/block-library/blocks/cover/style.css 1.6 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 159 B
build/block-library/blocks/details/style.css 159 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/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 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/interactivity.min.js 783 B
build/block-library/blocks/image/style-rtl.css 1.07 kB
build/block-library/blocks/image/style.css 1.07 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
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 507 B
build/block-library/blocks/media-text/style.css 505 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/interactivity.min.js 976 B
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 438 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-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 103 B
build/block-library/blocks/preformatted/style.css 103 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 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 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 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/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 528 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 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 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 174 B
build/block-library/blocks/video/style.css 174 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/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 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 50.3 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/compose/index.min.js 12.1 kB
build/core-commands/index.min.js 1.74 kB
build/core-data/index.min.js 15.7 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 640 B
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/style-rtl.css 7.57 kB
build/edit-post/style.css 7.56 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.57 kB
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/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.71 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 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/plugins/index.min.js 1.84 kB
build/preferences-persistence/index.min.js 1.84 kB
build/primitives/index.min.js 941 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 939 B
build/react-i18n/index.min.js 696 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.7 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.7 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 2.02 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.42 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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 1.04 kB
build/warning/index.min.js 268 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

@jameskoster
Copy link
Contributor

This looks really good to me 🚀

Should there be an indication somewhere that the new page will be a draft? Modal title could be "Draft a new page", or there could be a line of copy therein. The Snackbar is another option.

I'm a bit on the fence about merging, given the current tension between content/template in edit view. It's not so bad for existing pages because the content is easier to locate. But for new pages with empty post content it's very easy to start adding content to the template. Should we tackle #49086 first? Alternatively, could new pages created this way inject some example copy into Post Content for the user to replace?

@mtias
Copy link
Member

mtias commented May 12, 2023

We should have a component that doesn't redirect by default. In some context, it'd be fine to open the page as you are creating it, but in others it'd be a bit jarring — for example, from Link UI in menus or button blocks. Though we would want to be able to use the same modal.

I really think we should try to have the parent selector here in an unobtrusive way, default to "top level".

@SaxonF
Copy link
Contributor Author

SaxonF commented May 15, 2023

We should have a component that doesn't redirect by default. In some context, it'd be fine to open the page as you are creating it, but in others it'd be a bit jarring

I've adjusted action to include option to redirectAfterSave though implementation using store is a little weird.

@annezazu annezazu mentioned this pull request May 15, 2023
57 tasks
@jasmussen jasmussen mentioned this pull request May 16, 2023
17 tasks
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.

This is getting close, nice work.

>
{ decodeEntities(
page.title?.rendered
) ?? __( '(no title)' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

If the page title is an empty string this will return an empty string rather than (no title).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@scruffian I think this is something we can address in this issue as its more directly related to the pages list

@SaxonF
Copy link
Contributor Author

SaxonF commented May 30, 2023

But I still find the saving and publishing flow confusing.

This is good feedback. We have a separate issue for handling publish flow and some follow up work around adding pages that includes pattern insertion.

@mirka
Copy link
Member

mirka commented May 30, 2023

I haven't gotten to the root of it, but I'll add some debugging notes since I'm going to be away for two weeks.

The first was that in use-sync-canvas-mode-with-url.js we were setting currentCavasMode before performing checks, which meant it was always equal to canvasInUrl (see below). I've moved the setting below the checks.

I'm afraid this doesn't change anything. It's easy to misread because of the variable naming, but the currentCanvasInUrl ref is only read in the other useEffect, so it doesn't affect the checks in this useEffect.

The second is that I think there is a bug with AnimatePresence (most likely here and here).

These AnimatePresence bugs are interesting. Though, it might be entirely unrelated, because when you log everything the showSidebar variable fluctuates even more in our success case. This is because canvasMode is actually set to "view" once before being set back to the correct "edit", due to location params being stale until the next render. (Not sure if this is intentional, though theoretically it shouldn't be a problem as long as they're eventually correct.)

Logs

✅ Success case (whenever setCanvasMode() is called before the history.push(), i.e. the useEffects are first triggered by a setCanvasMode())

Console logs of what happens in the success case

❌ Failure case (whenever the history.push() is called before setCanvasMode(), i.e. the useEffects are first triggered by a history.push())

Console logs of what happens in the failure case


Next steps for me would be to get a more minimal repro in a sandbox, but depending on what your time/resource constraints are for this PR, the quick workaround is to call setCanvasMode() first.

@youknowriad
Copy link
Contributor

This is because canvasMode is actually set to "view" once before being set back to the correct "edit", due to location params being stale until the next render.

I guess that's because we have two separate hooks that read the "url" and update the state (one for canvas, one for the sidebar path). It's not entirely on purpose. Ideally we'd have only one hook to perform the path <=> state synchronization but I'm not sure how possible is that with our existing components.

@youknowriad
Copy link
Contributor

I think the workaround (setting canvas) might have another unwanted side effect: "creating two browser navigation steps" you'd have to click "previous" twice to go back to the previous page (to be tested though). That said, if the workaround works without issues, let's add an inline comment to explain why we had to do it.

);

onSave( newPage );

Copy link
Contributor

Choose a reason for hiding this comment

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

After the page is created, where should focus get placed? Right now it's being dropped at the hidden Back button in the closed sidebar. I agree with @carolinan that the current mode of being moved to the site editor template for this page is an odd experience. I'd be fine with it if the sidebar stayed open, in which case, handling the focus here isn't an issue since it's being placed in a sensible spot.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

the current mode of being moved to the site editor template for this page is an odd experience

This will make more sense once the content editing PR is merged. There is also some follow up work around improving the add page experience, including selecting starter patterns.

@SaxonF
Copy link
Contributor Author

SaxonF commented May 30, 2023

Thanks y'all, I'll test setting canvas today.

@mirka thanks for pointing out the variable names, my brain somehow couldn't distinguish between them 😆

@SaxonF
Copy link
Contributor Author

SaxonF commented May 31, 2023

Unfortunately I don't think adding setCanvasMode before or after the history push is going to work without also looking at use-sync-canvas-mode-with-url.js . As @youknowriad touched on, the history push in sync-canvas executes last (for some reason) with stale params so you're always taken to path=%2Fpage&canvas=edit instead of your new page.

I'd be surprised if this wasn't an issue with AnimatePresence. The sidebar is removed from DOM properly if you remove AnimatePresence, and you can see the exit animation is firing. I also tried adding key to each child within AnimatePresence which they should have without success.

Since this is an issue that's already in production affecting template and template part creation, could we spin up a separate issue to tackle the problem more holistically?

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

This is working well for me. Good first iteration!

  • A new page is created as expected
  • Checked in Safari/Chrome/Firefox
  • New E2E tests pass (I think the failing E2E on this branch is unrelated?)

I tend to agree with @carolinan about where I should be publishing the page, but I think we can iron out those details later?

I left some general comments and questions. Maybe matching the "No title" in the placeholder could be a quick win before merge?

<form onSubmit={ createPage }>
<VStack spacing={ 3 }>
<TextControl
label={ __( 'Page title' ) }
Copy link
Member

Choose a reason for hiding this comment

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

Give page a title and hit create

Not a blocker, just asking if we're not enforcing a page title for creation, maybe add 'Page title (optional)'?

packages/edit-site/src/components/add-new-page/index.js Outdated Show resolved Hide resolved
}

return (
<Modal title={ __( 'Draft a new page' ) } onRequestClose={ onClose }>
Copy link
Member

Choose a reason for hiding this comment

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

Not a blocker, but I noticed that when I throttled my connection I could close the modal and click around, only to be redirected to the new page, which seemed confusing.

A bit of an edge case though, unless you live in an area with bad internet speeds like me 😄

2023-06-06.12.01.53.mp4

Maybe in another iteration we could look at blocking the modal close until the save callback is fired?

	const closeModal = () => {
		if ( isCreatingPage ) {
			return;
		}
		onClose();
	};

@SaxonF SaxonF merged commit a59c1b6 into trunk Jun 6, 2023
@SaxonF SaxonF deleted the add/add-new-page branch June 6, 2023 03:39
@github-actions github-actions bot added this to the Gutenberg 16.0 milestone Jun 6, 2023
@ndiego ndiego added [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Enhancement A suggestion for improvement. labels Jun 7, 2023
@ndiego ndiego changed the title Create new page Add the ability to create a new page in the Site Editor Jun 7, 2023
@ndiego ndiego added the [Type] Feature New feature to highlight in changelogs. label Jun 7, 2023
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023
sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
* create new page

* remove pages nesting

* add redirectAfterSave to add page modal

* reset redirectAfterSave

* adjust copy of new page to show draft

* redirect after adding page

* create page modal use local state

* fix import add page

* add page use onClose and remove setPage

* cleaning up add page

* removed value and used placeholder for add page

* add page modal translations

* e2e test new page modal

* move setting current canvas

* removed unnecessary help text

* Revert "move setting current canvas"

This reverts commit 79d1116.

* update add new page placeholder

* auto focus add new page input

Co-authored-by: Ramon <[email protected]>

* add no title placeholder

---------

Co-authored-by: Ramon <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement. [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.