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

Template Parts: allow selection in page content focus mode #60010

Conversation

noisysocks
Copy link
Member

What?

Allows Template Part blocks (Header and Footer) to be selected when editing a page in the site editor in page content focus mode.

Why?

See #59970 (comment).

How?

  • Set the editing mode of core/template-part blocks to contentOnly, so that you can select it.
  • Set the editing mode of children of core/template-part blocks to disabled, so that you're forced to click Edit in the toolbar.
  • Changes BlockToolbar to show the block icon / block name on blocks that have a contentOnly editing mode, so that you can see the name of the template part when you've selected it.

Testing Instructions

  1. Go to Appearance → Editor → Pages and create or edit page.
  2. Click on the header or footer.

Screenshots or screencast

Kapture.2024-03-20.at.11.57.38.mp4

@noisysocks noisysocks added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Block] Template Part Affects the Template Parts Block [Feature] Page Content Focus Ability to toggle between focusing on editing the page and editing the template in the site editor. labels Mar 20, 2024
@noisysocks noisysocks requested review from SaxonF and richtabor March 20, 2024 00:58
@noisysocks noisysocks requested a review from ellatrix as a code owner March 20, 2024 00:58
Copy link

github-actions bot commented Mar 20, 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: noisysocks <[email protected]>
Co-authored-by: SaxonF <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: bacoords <[email protected]>

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

Copy link

github-actions bot commented Mar 20, 2024

Size Change: +921 B (0%)

Total Size: 1.72 MB

Filename Size Change
build/block-editor/index.min.js 253 kB +218 B (0%)
build/block-library/blocks/audio/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/audio/theme.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/cover/style-rtl.css 1.7 kB +7 B (0%)
build/block-library/blocks/cover/style.css 1.69 kB +7 B (0%)
build/block-library/blocks/embed/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/embed/theme.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/image/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/image/theme.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/pullquote/theme-rtl.css 174 B +6 B (+4%)
build/block-library/blocks/pullquote/theme.css 174 B +6 B (+4%)
build/block-library/blocks/quote/theme-rtl.css 233 B +10 B (+4%)
build/block-library/blocks/quote/theme.css 235 B +9 B (+4%)
build/block-library/blocks/social-links/editor-rtl.css 678 B -4 B (-1%)
build/block-library/blocks/social-links/editor.css 678 B -3 B (0%)
build/block-library/blocks/table/theme-rtl.css 152 B +6 B (+4%)
build/block-library/blocks/table/theme.css 152 B +6 B (+4%)
build/block-library/blocks/template-part/editor-rtl.css 431 B +28 B (+7%) 🔍
build/block-library/blocks/template-part/editor.css 431 B +28 B (+7%) 🔍
build/block-library/blocks/template-part/theme-rtl.css 107 B +6 B (+6%) 🔍
build/block-library/blocks/template-part/theme.css 107 B +6 B (+6%) 🔍
build/block-library/blocks/video/theme-rtl.css 133 B +7 B (+6%) 🔍
build/block-library/blocks/video/theme.css 133 B +7 B (+6%) 🔍
build/block-library/editor-rtl.css 12.4 kB +25 B (0%)
build/block-library/editor.css 12.4 kB +26 B (0%)
build/block-library/index.min.js 218 kB +145 B (0%)
build/block-library/style-rtl.css 14.8 kB +9 B (0%)
build/block-library/style.css 14.8 kB +5 B (0%)
build/block-library/theme-rtl.css 707 B +19 B (+3%)
build/block-library/theme.css 713 B +20 B (+3%)
build/core-data/index.min.js 72.9 kB +93 B (0%)
build/customize-widgets/index.min.js 11.2 kB +22 B (0%)
build/edit-post/index.min.js 24.1 kB -92 B (0%)
build/edit-site/index.min.js 217 kB -239 B (0%)
build/edit-site/style-rtl.css 15.1 kB +145 B (+1%)
build/edit-site/style.css 15.1 kB +152 B (+1%)
build/edit-widgets/index.min.js 17.3 kB +24 B (0%)
build/editor/index.min.js 64.1 kB +158 B (0%)
build/format-library/index.min.js 8.1 kB +73 B (+1%)
build/style-engine/index.min.js 2.03 kB -68 B (-3%)
build/widgets/index.min.js 7.22 kB +12 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.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.43 kB
build/block-editor/content.css 4.43 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
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/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 647 B
build/block-library/blocks/cover/editor.css 650 B
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 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/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/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.02 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 666 B
build/block-library/blocks/post-featured-image/editor.css 662 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 354 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/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 629 B
build/block-library/blocks/search/style.css 628 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 229 B
build/block-library/blocks/separator/style.css 229 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 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/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/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 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/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/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-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.8 kB
build/commands/index.min.js 15.6 kB
build/commands/style-rtl.css 935 B
build/commands/style.css 930 B
build/components/index.min.js 224 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.9 kB
build/compose/index.min.js 12.6 kB
build/core-commands/index.min.js 2.77 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 8.98 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 558 B
build/edit-post/classic.css 558 B
build/edit-post/style-rtl.css 5.58 kB
build/edit-post/style.css 5.57 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.16 kB
build/editor/style-rtl.css 5.36 kB
build/editor/style.css 5.35 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/style-rtl.css 492 B
build/format-library/style.css 490 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/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.15 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.74 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 849 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 2 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 742 B
build/patterns/index.min.js 5.73 kB
build/patterns/style-rtl.css 553 B
build/patterns/style.css 552 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.05 kB
build/preferences/index.min.js 2.81 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.5 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.72 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/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

Copy link
Contributor

@SaxonF SaxonF left a comment

Choose a reason for hiding this comment

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

Working well in testing. Nice work! I think its an improvement and finds a better balance whilst still locking templates which aren't modified as much as site navigation. @richtabor you happy to start here?

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Nice, this feels pretty good to use to me @noisysocks, so feels like a good place to start IMO! A couple of minor details:

The test create a new page, edit template and toggle page template preview appears to be failing expecting the Edit your template to edit this block notice, so some of the e2es might need updating.

While this is testing nicely for me in the site editor's view of editing a page, in the post editor with template preview mode switched on, it's possible to select the header or footer, and they're visible in the list view, but there's no option to Edit, so it isn't really possible to do anything. In this case, if the blocks cannot be edited in the current context, what would the desired behaviour be?

2024-03-20.14.07.46.mp4

@jasmussen
Copy link
Contributor

Nice work. When you're editing a page, this seems like a good flow. To clarify a hidden nuance here, which is related to editing of inline template parts as also discussed here: in this branch inline editing of template parts is still possible when you select a template in the site editor. So the main change here is for pages only, where now you can select the TP, but only edit it in isolation.

Since we are already having a special case for pages, this seems okay to me, but would love also a gut-check from @richtabor.

@jameskoster
Copy link
Contributor

Nice, this is working well for me and significantly shortens the journey to go and edit template parts from a page 🚀

A couple of small quirks we'll likely want to address:

  • Hover / focus outline should be purple rather than theme-color.
  • When the page loads, template parts show a dotted outline which fades away – I assume due to contentOnly? I'm not sure we need to specifically draw attention to the edit-ability of template parts?
  • The appending inserter shows up when you select a TP, which allows partial editing outside of focus mode:
Screenshot 2024-03-20 at 10 00 50
  • This only happens with my footer for some reason (stock page.html template in TT4), but when I select then focus away there's a double-border effect, one purple and one blue:
Screenshot 2024-03-20 at 10 13 38

@richtabor
Copy link
Member

So the main change here is for pages only, where now you can select the TP, but only edit it in isolation.

That's my understanding as well, and on point with my expectations of this effort.

Hover / focus outline should be purple rather than theme-color.
When the page loads, template parts show a dotted outline which fades away – I assume due to contentOnly? I'm not sure > we need to specifically draw attention to the edit-ability of template parts?

I think the whole dotted lines fading in work needs revisiting. It's not quite landing right.

Copy link
Member

@richtabor richtabor 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 certainly a step forward.

I'd like to see further explorations on an inline focus/isolated view, rather than navigating to the disconnected view next.

@noisysocks
Copy link
Member Author

noisysocks commented Mar 21, 2024

The test create a new page, edit template and toggle page template preview appears to be failing expecting the Edit your template to edit this block notice, so some of the e2es might need updating.

Fixed 👍

While this is testing nicely for me in the site editor's view of editing a page, in the post editor with template preview mode switched on, it's possible to select the header or footer, and they're visible in the list view, but there's no option to Edit, so it isn't really possible to do anything. In this case, if the blocks cannot be edited in the current context, what would the desired behaviour be?

Great catch @andrewserong. My read on the fix for this is that we should be reducing the number of differences between the site editor and the post editor. I know @youknowriad has been doing a lot in this area. So with that in mind in 34e9348 I moved the code that adds the Edit button to the Template Part toolbar from @wordpress/edit-site to @wordpress/editor so that it appears in both editors.

@ramonjd
Copy link
Member

ramonjd commented Mar 21, 2024

Nice stuff.

I tested this in the site and post editors. Works well with theme template parts and custom template parts.

Highlight color appears, for me, correctly on mouseover and on touch. I couldn't break it after the latest updates.

2024-03-21.12.10.19.mp4

🚢

@noisysocks
Copy link
Member Author

noisysocks commented Mar 22, 2024

  • The appending inserter shows up when you select a TP, which allows partial editing outside of focus mode:

I fixed this in 19516d7 by disabling appending when a template part is set to contentOnly which is not a great solution. I think we need to iterate on setBlockEditingMode to accomodate cases like this, but this will do for now.

@noisysocks
Copy link
Member Author

noisysocks commented Mar 22, 2024

When the page loads, template parts show a dotted outline which fades away – I assume due to contentOnly? I'm not sure we need to specifically draw attention to the edit-ability of template parts?
Similarly the outline is blue when the template part is selected but not focussed. Basically the outlines should always be purple.

OK think I've fixed these in b0b35da. Thanks @jameskoster. Feel free to push more CSS tweaks if I missed something.

@noisysocks
Copy link
Member Author

noisysocks commented Mar 22, 2024

  • Is there a way to still respect root padding when editing a root-level template part like header/footer? I assume there's a technical challenge there.

What do you mean by root padding?

  • Is it possible to include the "double click" to edit a template part that (I believe) is currently available?

I don't think we currently have a double click shortcut for template parts? Or at least locally in trunk when I double click a template part nothing happens beyond the inner block that I clicked on being selected which I'd expect to happen in any block.

  • How can we edit the post title on pages in the site editor if the template doesn't include a post title - is putting a title block in the content the best approach? How does this effect pages where the title is not actually visible on the page content?

Good question. Right now one would have to switch to the post editor if there's no Post Title block. It could be worth exploring allowing the title to be set in one of the sidebars (black W sidebar on left, or page sidebar on right). It's beyond the scope of this PR though.

@noisysocks
Copy link
Member Author

Thanks everyone! I've addressed / responded to all feedback. I'll merge once there's an approving code review.

@bacoords
Copy link
Contributor

What do you mean by root padding?

I'll open a separate issue for this.

I don't think we currently have a double click shortcut for template parts? Or at least locally in trunk when I double click a template part nothing happens beyond the inner block that I clicked on being selected which I'd expect to happen in any block.

Currently if you click the surrounding template or a template part from a page in the site editor you'll see a toast notification, but on a double click you get the modal that allows you to enter:

Screenshot 2024-03-21 at 8 29 06 PM

The caveat being (as I think you implied) that it allows you to edit the "template" whether you've double clicked over a template or a template part. But in trunk once in the template you are at that point able to edit either one in the same context.

In this PR you can see the same thing happen when you double click to edit the template around the page content, but not when you double click to edit the template part. That region previously responded to a double click but doesn't any longer.

Just noting that the behavior is inconsistent and it would be great to be able to say definitely to our users "you can double click to enter into editing global content". Understand if that requires a new issue/PR.

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Just gave this a re-test and it's still all working nicely for me in the post and site editors 👍

The code change is also looking good to me, and seems consistent with the feedback that Riad gave in reviews, too, with relevant code moved over to the template part block where possible.

LGTM! ✨

@noisysocks
Copy link
Member Author

What do you mean by root padding?

I'll open a separate issue for this.

Thank you! That'd be great.

In this PR you can see the same thing happen when you double click to edit the template around the page content, but not when you double click to edit the template part. That region previously responded to a double click but doesn't any longer.

Ah gotcha. I'm not sure. Personally I don't really like that dialog at all 😅 I think it would be unexpected if double clicking a template part behaved differently to double clicking a different block. Maybe the designers in this thread can weigh in on what we should do here. I can address it in a follow up if need be.

@noisysocks noisysocks merged commit e7ad4b5 into trunk Mar 22, 2024
60 checks passed
@noisysocks noisysocks deleted the update/allow-selecting-template-parts-in-page-content-focus-mode branch March 22, 2024 04:43
@github-actions github-actions bot added this to the Gutenberg 18.1 milestone Mar 22, 2024
@Mamaduka
Copy link
Member

Mamaduka commented Mar 22, 2024

@noisysocks, one of the e2e tests became flaky after this got merged into the trunk - #60102.

Update: Here's my attempt to fix it - #60109.

@jameskoster
Copy link
Contributor

How can we edit the post title on pages in the site editor if the template doesn't include a post title

#52763

@youknowriad
Copy link
Contributor

How can we edit the post title on pages in the site editor if the template doesn't include a post title

You can also disable "template previewing" from the "template panel" in the sidebar and you'll be thrown into the regular "post only" mode that does have a "title" input (like the post editor)

carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Mar 27, 2024
…60010)

* Allow selecting template parts in page content focus mode

* Show block name/icon in toolbar when editing mode is contentOnly

* Only show page content blocks in PageContent sidebar section

* Fix pages.spec.js

* Improve clarify of if()

* Move template part Edit button from @wordpress/edit-site to @wordpress/editor

* Rendering mode should be 'all' in post editor when editing a template or template part

* Revert "Rendering mode should be 'all' in post editor when editing a template or template part"

This reverts commit 348889e.

* Reset and remember rendering mode when navigating in post editor

* Remove unsupported rendering mode from docs

* Add 'Edit' button to Template Part block natively

* Disable appending into a template part

* Always show purple outline on template parts

Co-authored-by: noisysocks <[email protected]>
Co-authored-by: SaxonF <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: bacoords <[email protected]>
@ramonjd ramonjd changed the title Allow selecting template parts in page content focus mode Template Parts: allow selection in page content focus mode Apr 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Template Part Affects the Template Parts Block [Feature] Page Content Focus Ability to toggle between focusing on editing the page and editing the template in the site editor. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.