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: Prevent unintended actions on the classic theme #54422

Merged
merged 9 commits into from
Sep 27, 2023

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented Sep 13, 2023

Related to #54066, #52150
Related core ticket: https://core.trac.wordpress.org/ticket/58827
Related core PR: WordPress/wordpress-develop#5201 (comment)

What?

This PR prevents the following three unintended actions in case the Classic theme is allowed to access the Patterns page of the Site Editor.

  • Can create a template part
  • Can back to Design page
  • Can access All template parts page
  • The back button link on the All Template Parts page is to the dashboard even if the Site Editor's Patterns page is accessed directly (in this scenario, it is expected to return to the Patterns page)
Before After
before after

Why?

As a first step toward making the Patterns page (site-editor.php?path=/patterns) accessible to all classic themes in the future, we are considering the following in WP6.4:

  1. Add an Appearance -> Patterns link for all classic themes that point to edit.php?post_type=wp_block.
  2. Allow site-editor.php?path=/patterns access for classic themes internally.

This means that users of the classic theme will not see the link to the Pattern page (site-editor.php?path=/patterns) anywhere, but will be able to access it by typing its URL directly into their browser.

Therefore, actions that are not expected in that case need to be prevented in advance.

Testing Instructions

To temporarily allow access to the site editor from the classic theme, comment out here in the WordPress core

  1. Access http://localhost:8889/wp-admin
  2. Activate Twenty Twenty One
  3. Enter http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns in the URL bar of your browser to access the Patterns page
  4. Make sure the "Manage all template parts" menu is not displayed
  5. Confirm that new template parts cannot be created
  6. Check these steps also for the classic theme (EmptyHybrid) with block-template-parts support

Additional Test

If a classic theme that supports block template parts goes directly to the Patterns page in the Site Editor, the back button link on the All Template Parts page should always go to the Patterns page instead of the Dashboard.

To control this, I introduce a URL parameter called didAccessPatternsPage.

Based on this, please test the following:

  • Block Theme: It should work as before. No matter what you do, the URL should always have no didAccessPatternsPage parameter.
  • Classic Theme with template parts support:
    • Activate Emptyhybrid theme.
    • Access http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns directly.
    • No matter what operation is performed, the All Template Parts page should return to the Patterns page.
    • The didAccessPatternsPage URL parameter is retained even if the browser is reloaded.
    • You should always return to the Patterns page, even after reloading the browser or reviving a closed tab with Cmd+Shift+T.
  • Classic Theme without template parts support:
    • Activate Twenty Twenty-One.
    • Access http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns directly.
    • The URL should not have a didAccessPatternsPage parameter, no matter what operation is performed, not to mention that the template parts are not accessible.

@t-hamano t-hamano added [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Sep 13, 2023
@t-hamano t-hamano self-assigned this Sep 13, 2023
@t-hamano t-hamano changed the title Patterns Page: Don't allow template part actions in the Classic theme Site Editor: Don't allow unintended actions on the classic theme Sep 13, 2023
@github-actions
Copy link

github-actions bot commented Sep 13, 2023

Size Change: +241 B (0%)

Total Size: 1.62 MB

Filename Size Change
build/block-library/index.min.js 207 kB +16 B (0%)
build/core-commands/index.min.js 2.71 kB +90 B (+3%)
build/edit-site/index.min.js 185 kB +135 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 461 B
build/block-directory/index.min.js 7.05 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.28 kB
build/block-editor/content.css 4.27 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 218 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 138 B
build/block-library/blocks/audio/theme.css 138 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 587 B
build/block-library/blocks/button/editor.css 587 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 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.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 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 138 B
build/block-library/blocks/embed/theme.css 138 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 311 B
build/block-library/blocks/file/style.css 312 B
build/block-library/blocks/file/view.min.js 321 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 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 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 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.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 671 B
build/block-library/blocks/navigation-link/editor.css 672 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 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.01 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 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 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-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 322 B
build/block-library/blocks/post-featured-image/style.css 322 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 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 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/style-rtl.css 375 B
build/block-library/blocks/query/style.css 372 B
build/block-library/blocks/query/view.min.js 609 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 604 B
build/block-library/blocks/search/style.css 604 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 471 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 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 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 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.45 kB
build/block-library/blocks/social-links/style.css 1.45 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 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.2 kB
build/block-library/editor.css 12.2 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 kB
build/block-library/style.css 14 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 247 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12.7 kB
build/core-data/index.min.js 70.5 kB
build/customize-widgets/index.min.js 12 kB
build/customize-widgets/style-rtl.css 1.51 kB
build/customize-widgets/style.css 1.5 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.87 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 35.6 kB
build/edit-post/style-rtl.css 7.92 kB
build/edit-post/style.css 7.91 kB
build/edit-site/style-rtl.css 14 kB
build/edit-site/style.css 14 kB
build/edit-widgets/index.min.js 17 kB
build/edit-widgets/style-rtl.css 4.84 kB
build/edit-widgets/style.css 4.84 kB
build/editor/index.min.js 45.9 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.75 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/index.min.js 11.4 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.74 kB
build/keycodes/index.min.js 1.9 kB
build/list-reusable-blocks/index.min.js 2.2 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 3.56 kB
build/patterns/style-rtl.css 325 B
build/patterns/style.css 325 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.25 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 972 B
build/react-i18n/index.min.js 624 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.72 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.2 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 1.95 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.84 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 968 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.17 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@t-hamano t-hamano changed the title Site Editor: Don't allow unintended actions on the classic theme Site Editor: Prevent unintended actions on the classic theme Sep 13, 2023
@t-hamano t-hamano marked this pull request as ready for review September 13, 2023 12:48
Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

Makes sense to me! Thanks!

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Thanks for continuing the work on this one @t-hamano 👍

The correct links and menu items are showing for me depending on the type of theme.

Classic Hybrid
Screenshot 2023-09-14 at 6 14 11 pm Screenshot 2023-09-14 at 6 13 56 pm

The only odd thing I noticed was when using a hybrid theme, you can access the template part index page via two ways.

  1. Appearance > Template Parts
  2. Patterns > Manage all template parts

Regardless of which way you navigate there, hitting back will take you to wp-admin.

Is there a way we can take the user back to the Patterns page if that is how they got to the template parts index page in the site-editor?

@t-hamano
Copy link
Contributor Author

The only odd thing I noticed was when using a hybrid theme, you can access the template part index page via two ways.

  1. Appearance > Template Parts
  2. Patterns > Manage all template parts

Regardless of which way you navigate there, hitting back will take you to wp-admin.

My understanding is that this is expected behavior at this point.

As discussed in #54066, all Patterns links are edit.php?post_type=wp_block instead of site-editor.php?path=/patterns until the minimum WP version supported by the Gutenberg plugin increases to 6.4. Until then, we are only allowing access to the Patterns page (site-editor.php?path=/patterns) internally, so unless the user directly types site-editor.php?path=/patterns into the browser, the Patterns page will not be accessed.

In other words, there is only one way to access the template parts index page: "Appearance > Template Parts". Also, I don't think it is expected at this point to return to the patterns page from the template parts index page.

@aaronrobertshaw
Copy link
Contributor

Until then, we are only allowing access to the Patterns page (site-editor.php?path=/patterns) internally, so unless the user directly types site-editor.php?path=/patterns into the browser, the Patterns page will not be accessed.

If it can be accessed, even if only being typed directly, I'd expect users will. After all, that's how some users have been accessing the edit.php?post_type=wp_block page to manage patterns.

We could say there is only one official way to access the template parts index page, but there are two possible ways. So if there is a way we could return to the correct location using the history state or something, that would be a proactive step to avoiding a jarring experience.

@t-hamano
Copy link
Contributor Author

We could say there is only one official way to access the template parts index page, but there are two possible ways. So if there is a way we could return to the correct location using the history state or something, that would be a proactive step to avoiding a jarring experience.

I see, it checks if the page just before accessing the template parts index page was a Pattern page (i.e. whether the user accessed directly to the Patterns page) and if so, back to the Pattern page instead of the dashboard. This is the ideal behaviour, right?

@t-hamano
Copy link
Contributor Author

I was wondering what approach would be best to determine if the Patterns page was accessed directly. At first, I considered adding that information to the URL parameter and making a determination based on that parameter, but the URL parameter would be overwritten in various places.

In the end, I took the following approach:

  • Added a private API to determine whether the Patterns page has been accessed
  • Dispatch the state that the Pattern page was accessed via setDidAccessPatternsPage when the Patterns page is rendered
  • On the "All Template Parts" page, determine whether the Patterns page has already been accessed via the didAccessPatternsPage selector (that is, whether the Patterns page was accessed directly). Controls whether to return to the Patterns page or the dashboard based on the results.

With this logic, a classic theme with block-template-parts should behave like this:

  • If you access the Patterns page directly, the "All template Parts" page will always return you to the Patterns page, no matter what page transitions you make, unless you reload your browser.
  • When you go to Appearance > Template Parts, the "All Template Parts page" always returns you to the dashboard.
Screencast
86aee6b69ef6f7a72066e19129311674.mp4

@github-actions
Copy link

Flaky tests detected in 8a78ac2.
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/6205258274
📝 Reported issues:

@aaronrobertshaw
Copy link
Contributor

At first, I considered adding that information to the URL parameter and making a determination based on that parameter, but the URL parameter would be overwritten in various places.

I was expecting we'd do something along these lines so that reloading the page didn't interfere with going back to the correct location. From memory there is some two way syncing of the URL that can make things tricky. It should be doable though as we maintain some query string params for navigating pattern pages.

Added a private API to determine whether the Patterns page has been accessed

This is an improvement but I do wonder if it is adding too much complexity for a pretty contrived edge case. It might be good to get some fresh eyes here. Perhaps @glendaviesnz and @kevin940726 might have some thoughts?

Thanks for your patience here again @t-hamano 👍

@kevin940726
Copy link
Member

There's a more common way of doing this in general via history.state. It's similar to how "modal routes" are implemented in some popular websites (Facebook, Instagram, Reddit, etc).

The trick is to append a state object with the current (/patterns) location when navigating after clicking the "Manage all template parts" link. Then, when clicking the "Back" button, we first check if history.state has the /patterns location, and just call history.back() if it has. On the other hand, if it's coming from a direct link (no history.state), then we just navigate the user to wp-admin.

The benefit of storing the information in history.state as opposed to local store is that it survives after reloading and even after closing and reviving the tab (Cmd+Shift+T).

However, as pointed out by @aaronrobertshaw, the two-way syncing gotcha in the site editor might make this more complicated than it should be though. 🤔

@t-hamano
Copy link
Contributor Author

The trick is to append a state object with the current (/patterns) location when navigating after clicking the "Manage all template parts" link. Then, when clicking the "Back" button, we first check if history.state has the /patterns location, and just call history.back() if it has. On the other hand, if it's coming from a direct link (no history.state), then we just navigate the user to wp-admin.

I think the concern with this approach is that the user has other ways to navigate away from the Patterns page other than clicking on "Manage all template parts" link.

Users might type "header" in the Command Palette to go to the template part's editing canvas. Or users might click "Create pattern" to go to the pattern editing canvas.

So I'm concerned about whether we can control all of these actions by using history.state. 🤔

@t-hamano
Copy link
Contributor Author

I was expecting we'd do something along these lines so that reloading the page didn't interfere with going back to the correct location. From memory there is some two way syncing of the URL that can make things tricky. It should be doable though as we maintain some query string params for navigating pattern pages.

I tried working with this approach. history.state alone probably didn't work in a bidirectional relationship with the URL, so I'm explicitly giving it didAccessPatternsPage=1 as a URL parameter. This parameter is only added for classic themes that support block template parts.

It should work like this:

  • Block Theme: It should work as before. No matter what you do, the URL should always have no didAccessPatternsPage parameter.
  • Classic Theme with template parts support:
    • Activate Emptyhybrid theme.
    • Access http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns directly.
    • No matter what operation is performed, the All Template Parts page should return to the Patterns page.
    • The didAccessPatternsPage URL parameter is retained even if the browser is reloaded.
    • You should always return to the Patterns page, even after reloading the browser or reviving a closed tab with Cmd+Shift+T.
  • Classic Theme without template parts support:
    • Activate Twenty Twenty-One.
    • Access http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns directly.
    • The URL should not have a didAccessPatternsPage parameter, no matter what operation is performed, not to mention that the template parts are not accessible.
Screencast
a32a7132be28e4a41c06b04c14c5992d.mp4

I don't know if this approach is ideal, but I'd like your input.

Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

Works well in my testing! I don't know how important didAccessPatternsPage is at this stage as there's not a public link, but I appreciate the thorough work around making sure the UX is as smooth as possible! Thank you! 💯

path: '/wp_template_part/all',
// If a classic theme that supports template parts accessed
// the Patterns page directly, preserve that state in the URL.
didAccessPatternsPage: isTemplatePartsMode ? 1 : undefined,
Copy link
Member

Choose a reason for hiding this comment

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

Nit: I know isTemplatePartsMode implicitly implies ! isBlockBasedTheme but to me it's not that obvious from the naming alone 😅 . Do you think we should add ! isBlockBasedTheme just to make it clearer?

Copy link
Contributor

Choose a reason for hiding this comment

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

When someone comes to this fresh without much context, I think it could really help to be explicit here and probably doesn't hurt much to make this tweak.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I see, added by b3963ef 👍

Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

Tested as advertised for me as well:

With Classic theme:
✅ Could enter http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns in the URL bar of browser to access the Patterns page
✅ "Manage all template parts" menu is not displayed
✅ New template parts cannot be created

With Hybrid theme:
✅ Could enter http://localhost:8889/wp-admin/site-editor.php?path=%2Fpatterns in the URL bar of browser to access the Patterns page
✅ "Manage all template parts" menu was displayed and worked as expected

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

As @kevin940726 and @glendaviesnz have noted, the navigation once within the site editor looks pretty solid.

Unfortunately, an error gets thrown when trying to search commands in the command palette in the post editor.

Screenshot 2023-09-22 at 1 59 44 pm

If you have the time it might help to freshen up the PR description and test instructions along the lines of your comment above 🙏

Special thanks for the video, I might have missed retesting the command palette without it jogging my memory 🙂

Comment on lines 139 to 141
const {
params: { path, postType, didAccessPatternsPage },
} = useLocation();
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw Sep 22, 2023

Choose a reason for hiding this comment

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

This appears to throw an error when using the command palette anywhere except the site editor e.g. post editor, editing custom post type such as the wp_block patterns etc.

Copy link
Contributor

Choose a reason for hiding this comment

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

We only need to check for these params while in the site editor, so a simple guard against the undefined location might suffice. What do you think?

Copy link
Member

Choose a reason for hiding this comment

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

Good spot! Guarding against undefined seems logical to me 👍

Copy link
Contributor Author

@t-hamano t-hamano Sep 22, 2023

Choose a reason for hiding this comment

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

Thank you for finding it! I fixed it with fa499af.

Fixed with fa499af and 58f0d0a.

@t-hamano
Copy link
Contributor Author

Thank you everyone for your cooperation 🙇 I think this PR is ready to be merged. The PR description has also been updated.

However, a PR for WP Core that allows access to the Site Editor from classic themes has not yet been committed.

Should this PR be merged after it is committed in the core? My understanding is that this is a bug fix that prevents unintended behavior, so it should be able to be backported after the Beta1 release.

Regarding the core PR, I'm also inviting the core team to review on the #6-4-release-leads channel.

@kevin940726
Copy link
Member

Tested well for me!

Should this PR be merged after it is committed in the core? My understanding is that this is a bug fix that prevents unintended behavior, so it should be able to be backported after the Beta1 release.

I think it's okay to merge this before the core patch. It can be seen as a bug fix and doesn't necessarily depend on the core patch. As long as merging it alone doesn't break any existing behavior, I think we can just yolo merge this. Worst case is reverting it, not a big deal to me 🤷‍♂️.

Regarding the core PR, I'm also inviting the core team to review on the #6-4-release-leads channel.

Thank you! Much appreciated!

@kevin940726 kevin940726 added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Sep 25, 2023
@mikachan mikachan added the [Type] Enhancement A suggestion for improvement. label Sep 25, 2023
@t-hamano
Copy link
Contributor Author

Update: The core ticket milestone was assigned 6.4. As @kevin940726 said, just merging this should have no effect on existing behavior. Also, even if the core patch is not applied in WP6.4, I would like to merge this PR as it should be useful in the future!

@t-hamano t-hamano merged commit c1fba86 into trunk Sep 27, 2023
50 checks passed
@t-hamano t-hamano deleted the patterns/classic-theme-bc branch September 27, 2023 03:14
@github-actions github-actions bot added this to the Gutenberg 16.8 milestone Sep 27, 2023
mikachan pushed a commit that referenced this pull request Sep 27, 2023
* Add action and selector to track access to Patterns page

* Add a URL parameter to check if the Patterns page was accessed directly

* Revert lib changes

* Fix critical error in the Post Editor

* Explicitly add `! isBlockBasedTheme` with `isTemplatePartsMode`

* Fix critical error in the Post Editor
@mikachan
Copy link
Member

I just cherry-picked this PR to the release/16.7 branch to get it included in the next release: d7cd5cd

@mikachan mikachan removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Sep 27, 2023
mikachan pushed a commit that referenced this pull request Sep 28, 2023
* Add action and selector to track access to Patterns page

* Add a URL parameter to check if the Patterns page was accessed directly

* Revert lib changes

* Fix critical error in the Post Editor

* Explicitly add `! isBlockBasedTheme` with `isTemplatePartsMode`

* Fix critical error in the Post Editor
fluiddot pushed a commit that referenced this pull request Oct 2, 2023
* Fix the install of system fonts from a font collection (#54713)

* Fix set upload dir test (#54762)

* Site Editor: Prevent unintended actions on the classic theme (#54422)

* Add action and selector to track access to Patterns page

* Add a URL parameter to check if the Patterns page was accessed directly

* Revert lib changes

* Fix critical error in the Post Editor

* Explicitly add `! isBlockBasedTheme` with `isTemplatePartsMode`

* Fix critical error in the Post Editor

* Patterns: Fix back navigation after pattern creation (#54852)

* Patterns: Fix category control width in site editor (#54853)

* Patterns: Allow non-user patterns under Standard filter (#54756)

* Performance Tests: Separate page setup from test (#53808)

# Conflicts:
#	test/performance/specs/post-editor.spec.js

* Performance Tests: Support legacy selector for expanded elements (#54690)

* Paragraph: Make 'aria-label' consistent with other blocks (#54687)

* Paragraph: Make 'aria-label' consistent with other blocks

* Update tests

* Try using BC labels in performance tests

* Move lightbox render function to filter (#54670)

* syntax refactor repace strpos with str_contains (#54832)

* Font Library: avoid deprected error in test (#54802)

* fix deprecated call

* removing unwanted line

* Fix the ShortcutProvider usage (#54851)

Co-authored-by: Marin Atanasov <[email protected]>

* Image: Ensure `false` values are preserved in memory when defined in `theme.json` (#54639)

* Modify conditional when parsing config

* Only drop the value if it's undefined.

---------

Co-authored-by: Michal Czaplinski <[email protected]>

* Use "Not synced" in place of "Standard" nomenclature for patterns (#54839)

* Standard -> Not synced

* Fix broken test

---------

Co-authored-by: Glen Davies <[email protected]>

* Format Library: Try to fix highlight popover jumping (#54736)

* Move mime-type collection generation to a function that can be tested… (#54844)

* Move mime-type collection generation to a function that can be tested.  Refactored to use that function.

* linting changes

* Add unit tests to mime type getter

* Fixed linting errors

* test the entire output array and replace assertTrue by assertEquals

* fixing docs

---------

Co-authored-by: Matias Benedetto <[email protected]>

* Ensure lightbox toggle is shown if block-level setting exists (#54878)

* Block Editor: Update strings in blocks 'RenameModal' component (#54887)

* Footnotes: Add aria-label to return links (#54843)

* Add aria-label to footnotes front-end links.

* Add visual output. Fix PHPCS errors.

* Remove visual changes, fix in follow-up.

* Font Library: Changed the OTF mime type expected value to be what PHP returns (#54886)

* Changed the OTF mime type expected value to be what PHP returns

* add unit test for otf file installation

---------

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

* Image: Fix layout shift when lightbox is opened and closed (#53026)

* Replace overflow: hidden with JavaScript callback to prevent scrolling

* Disable scroll callback on mobile; add comments; fix scrim styles

The page jumps around when trying to override the scroll behavior
on mobile, so I disabled it altogether. I've also added comments
to clarify this and other decisions made around the scroll handling.

While testing, I realized that the scrim was completely opaque during
the zoom animation, which does not match the design, so I added a new
animation specifically for the scrim to fix that.

* Add handling for horizontally oriented pages

* Move close button so that it's further from scrollbar on desktop

* Fix call to handleScroll() and add touch callback to new render method

* Improve lightbox experience on mobile

To ensure pinch to zoom works as expected when the lightbox
is open on mobile, I added logic to disable the scroll override
when touch is detected. Without this, the scroll override kicks
in whenever one tries to pinch to zoom, and it breaks the experience.

I also revised the styles for the scrim to make it opaque, as having
content visible outside of the lightbox is distracting when
pinching to zoom on a mobile device, and I think having a consistent
lightbox across devices will make for the best user experience.

* Fix spacing

* Add touch directives to block supports

* Fix spacing in block supports

* Rename attribute for clarity

* Update comment

* Update comments

* Fix spacing

---------

Co-authored-by: Ricardo Artemio Morales <[email protected]>

* Font Library: move font uploads to a new tab (#54655)

* move font uploads to a new tab in the modal

* fix invalid success message and revert the dropzone to modal

* add success notice for font uploads

* make supported file formats message dynamic based on allowed extensions

* update hint text and clear successful message with a fresh upload

* Block custom CSS: Fix incorrect CSS when multiple root selectors (#53602)

* Block custom CSS: Fix incorrect CSS when multiple root selectors

* Fix PHP lint error

* Use `scope_selector` and `append_to_selector` method and update unit test

* Use `scopeSelector` and `appendToSelector` function and update JS unit test

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js

Co-authored-by: Aaron Robertshaw <[email protected]>

* Update packages/block-editor/src/components/global-styles/utils.js

Co-authored-by: Aaron Robertshaw <[email protected]>

* re-trigger CI

---------

Co-authored-by: Aaron Robertshaw <[email protected]>

* Add new e2e test for creating a pattern (#54855)

* Use list role instead of listbox for patterns (#54884)

* Popover: Fix the styles for components that use emotion within popovers (#54912)

# Conflicts:
#	packages/components/CHANGELOG.md

* Footnotes: use core’s meta revisioning if available (#52988)

# Conflicts:
#	packages/block-library/src/footnotes/index.php

* Remove base url from link control search results  (#54553)

* Expose baseURL setting on Post and Site Editors via block settings

* Strip baseURL from rendered search results

* Only fetch baseURL once in top level component

* Simplify implementation to utilise URL parse functions

* Improve comment wording to avoid referencing undefined var

* Remove superfluous conditional

* Decode URL prior to operations

* Refactor for readability

* Fix where url is not defined

* Revert change to filter util

* Ensure that filterURLForDisplay always receives a string as an arg

* Make e2e test locator less strict

* Prefer pipe

* Force remove trailing slash

* [Site Editor]: Update copy of using  the default template in a page (#54728)

* Remove overflow: hidden from the entity title h1 in the site editor sidebar (#54769)

* Site Editor: Avoid same key warnings in template parts area listings (#54863)

* TemplateAreas use template part clientId as key
* HomeTemplateDetails use template part clientId as key
* Cleanup useSelect hook

* Fix ToolSelector popover variant (#54840)

* Font Library: refactor endpoint permissions (#54829)

* break the checking of user permission and file write permissions

* return error 500 if the request to the install fonts endpoint needs write permissions and wordpress doens't have write permission on the server

* do not ask file write permission on uninstall endpoint

* Standardize the output of install and uninstall fonts endpoints

Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>

* Handle standardized output from install and uninstall endpoints in the frontend

Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>

* Update the install and unintall fonts endpoints unit tests for the new standardized output format

Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>

* fix the refersh call for the library

Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>

---------

Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>

* Don’t use TypeScript files in scripts package (#54856)

* Fix Search Block not updating in Nav block (#54823)

* Avoid setState in render

* Attempt at test coverage

* Improve tests and make them work

* Remove word-wrap property (#54866)

---------

Co-authored-by: Matias Benedetto <[email protected]>
Co-authored-by: Aki Hamano <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>
Co-authored-by: Bart Kalisz <[email protected]>
Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: Artemio Morales <[email protected]>
Co-authored-by: Riad Benguella <[email protected]>
Co-authored-by: Marin Atanasov <[email protected]>
Co-authored-by: Michal Czaplinski <[email protected]>
Co-authored-by: Rich Tabor <[email protected]>
Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Alex Stine <[email protected]>
Co-authored-by: madhusudhand <[email protected]>
Co-authored-by: Carlos Bravo <[email protected]>
Co-authored-by: Ricardo Artemio Morales <[email protected]>
Co-authored-by: Kai Hao <[email protected]>
Co-authored-by: Adam Silverstein <[email protected]>
Co-authored-by: Dave Smith <[email protected]>
Co-authored-by: Nik Tsekouras <[email protected]>
Co-authored-by: Ramon <[email protected]>
Co-authored-by: Jason Crist <[email protected]>
Co-authored-by: Jeff Ong <[email protected]>
Co-authored-by: Pascal Birchler <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

5 participants